/* ============================================================
   Grabstein's Bagels — Color Tokens
   Black, white, warm white & gray carry the interface.
   Food brings the color — accents used sparingly.
   ============================================================ */
:root {
  /* —— Core neutrals (the interface) —— */
  --gb-black:       #0A0A0A;   /* Deep Black  — signage, type, blocks */
  --gb-warm-white:  #FAF9F6;   /* Warm White  — default page canvas   */
  --gb-tile-white:  #FFFFFF;   /* Tile White  — cards, inputs, tile    */
  --gb-light-gray:  #E6E6E6;   /* Light Gray  — hairlines, dividers    */
  --gb-mid-gray:    #6A6A6A;   /* Mid Gray    — secondary text, meta (darkened from #777 for WCAG AA on paper) */

  /* derived neutrals for finer control */
  --gb-near-black:  #1A1A1A;   /* hover on black surfaces             */
  --gb-soft-gray:   #B5B5B5;   /* disabled text / placeholder         */
  --gb-paper:       #F2EFE8;   /* kraft-paper warm tint for panels    */

  /* —— Food accents (USE SPARINGLY — let photos carry color) —— */
  --gb-lox:         #FF8A70;   /* Lox Salmon   */
  --gb-tomato:      #E53935;   /* Tomato Red   */
  --gb-scallion:    #2E7D32;   /* Scallion Green */
  --gb-yolk:        #FFC107;   /* Egg Yolk Gold */
  --gb-coffee:      #6B4E2E;   /* Coffee Brown */

  /* ————————————————————————————————————————————————
     Semantic aliases — reference THESE in components
     ———————————————————————————————————————————————— */
  --color-bg:            var(--gb-warm-white);
  --color-bg-inverse:    var(--gb-black);
  --color-surface:       var(--gb-tile-white);
  --color-surface-kraft: var(--gb-paper);

  --color-ink:           var(--gb-black);   /* primary text */
  --color-ink-muted:     var(--gb-mid-gray);/* secondary text */
  --color-ink-faint:     var(--gb-soft-gray);
  --color-ink-inverse:   var(--gb-warm-white); /* text on black */

  --color-line:          var(--gb-light-gray); /* subtle dividers */
  --color-line-strong:   var(--gb-black);       /* signage rules */

  /* interactive (default brand button = solid black) */
  --color-action:        var(--gb-black);
  --color-action-hover:  var(--gb-near-black);
  --color-action-text:   var(--gb-warm-white);
  --color-focus:         var(--gb-black);

  /* status — borrowed from the food palette */
  --color-success:       var(--gb-scallion);
  --color-warning:       var(--gb-yolk);
  --color-danger:        var(--gb-tomato);
}