/* ============================================================
   Deals Place — Design Tokens (single source of truth)

   Three layers, each referencing the one above it:
     1. PRIMITIVE  — raw values, no meaning (the palette & scales)
     2. SEMANTIC   — purpose aliases the page CSS actually uses
     3. COMPONENT  — component-specific values built from semantics

   Linked by both index.html and restaurants.html. Change a value
   here and it updates everywhere. The semantic names match what the
   page stylesheets already reference, so pages need no other change.
   ============================================================ */
:root{

  /* ---------- 1 · PRIMITIVES ---------- */

  /* Cream / warm neutrals */
  --c-cream-50:  #FFFBF5;
  --c-cream-100: #F6EFE4;
  --c-cream-200: #EFE3D1;

  /* Ink / warm near-blacks */
  --c-ink-900: #211A13;
  --c-ink-800: #1A140E;
  --c-ink-500: #6A5D4E;
  --c-ink-rgb: 33, 26, 19;   /* channels, for building alpha lines */

  /* Orange brand ramp */
  --c-orange-100: #FBE4D2;
  --c-orange-500: #EF6420;
  --c-orange-700: #C0430F;
  --c-orange-rgb: 239, 100, 32;

  /* Signal */
  --c-green-400: #7BD88F;

  /* Type families */
  --font-serif: "Fraunces", Georgia, serif;
  --font-sans:  "Hanken Grotesk", system-ui, -apple-system, sans-serif;
  --font-mono:  "JetBrains Mono", ui-monospace, monospace;

  /* Radius scale */
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 22px;

  /* Motion */
  --ease-out-quart: cubic-bezier(.22, 1, .36, 1);

  /* Layout */
  --w-container: 1200px;
  --pad-page:    clamp(20px, 5vw, 64px);


  /* ---------- 2 · SEMANTIC (names the pages reference) ---------- */

  --paper:       var(--c-cream-100);          /* page background       */
  --paper-2:     var(--c-cream-200);          /* alt / section band    */
  --card:        var(--c-cream-50);           /* raised surface        */
  --ink:         var(--c-ink-900);            /* primary text          */
  --ink-soft:    var(--c-ink-500);            /* muted text            */
  --ink-bg:      var(--c-ink-800);            /* inverse (dark) section */
  --brand:       var(--c-orange-500);         /* accent                */
  --brand-deep:  var(--c-orange-700);         /* accent, strong        */
  --brand-tint:  var(--c-orange-100);         /* accent, subtle fill   */
  --line:        rgba(var(--c-ink-rgb), .12); /* hairline border       */
  --line-strong: rgba(var(--c-ink-rgb), .20);
  --signal-live: var(--c-green-400);          /* "now live" dot        */

  --f-display: var(--font-serif);
  --f-body:    var(--font-sans);
  --f-mono:    var(--font-mono);
  --ease-out:  var(--ease-out-quart);
  --container: var(--w-container);
  --page-px:   var(--pad-page);
  --r:    var(--radius-md);
  --r-sm: var(--radius-sm);
  --r-lg: var(--radius-lg);


  /* ---------- 3 · COMPONENT ---------- */

  --nav-solid-bg:      rgba(246, 239, 228, .92);            /* cream, translucent header */
  --btn-primary-shadow:       0 12px 30px rgba(var(--c-orange-rgb), .35);
  --btn-primary-shadow-hover: 0 18px 40px rgba(var(--c-orange-rgb), .45);
}