/* ═══════════════════════════════════════════════════════════════
   NOVRA FOODS — system.css
   Design tokens. Single source of truth for color, type, spacing,
   motion, and z-index. Imported first by every page.

   Anchored to the brand palette: charcoal, cream, olive, gold, sage.
   No dark-mode flip — sections deliberately alternate cream-on-
   charcoal and charcoal-on-cream. The palette IS both.
═══════════════════════════════════════════════════════════════ */

:root{

  /* ─── COLOR — anchor palette ───────────────────────────────── */
  --charcoal:   #0E0F0C;
  --cream:      #F2EBDB;
  --olive:      #3E4A2C;
  --gold:       #B8924A;
  --sage:       #9DAE8A;

  /* Tonal variants — small set, kept honest */
  --cream-100:  #F8F3E7;   /* lighter cream — hover surfaces */
  --cream-300:  #E8DEC8;   /* deeper cream — section dividers */
  --charcoal-90:#1A1B17;
  --charcoal-80:#2A2B26;

  /* ─── SEMANTIC ALIASES ─────────────────────────────────────── */
  --surface:        var(--cream);
  --surface-deep:   var(--charcoal);
  --surface-soft:   var(--cream-100);
  --ink:            var(--charcoal);
  --ink-inverse:    var(--cream);
  --ink-muted:      color-mix(in oklab, var(--charcoal) 65%, var(--cream));
  --ink-faint:      color-mix(in oklab, var(--charcoal) 38%, var(--cream));
  --ink-muted-inv:  color-mix(in oklab, var(--cream) 70%, var(--charcoal));
  --ink-faint-inv:  color-mix(in oklab, var(--cream) 42%, var(--charcoal));
  --rule:           color-mix(in oklab, var(--charcoal) 12%, transparent);
  --rule-strong:    color-mix(in oklab, var(--charcoal) 24%, transparent);
  --rule-inverse:   color-mix(in oklab, var(--cream) 14%, transparent);
  --accent:         var(--gold);
  --accent-deep:    var(--olive);
  --accent-soft:    var(--sage);
  --focus-ring:     var(--gold);

  /* ─── TYPE ─────────────────────────────────────────────────── */
  --font-display:   'Cormorant Garamond', 'Tiempos Headline', 'GT Sectra', Georgia, serif;
  --font-body:      'Outfit', 'GT America', 'Söhne', 'Maison Neue', 'Helvetica Neue', Arial, sans-serif;
  --font-arabic:    'Amiri', 'Noto Naskh Arabic', serif;
  --font-mono:      ui-monospace, 'SF Mono', Menlo, monospace;

  /* Type scale — major third on 16px base, rounded to 8pt-friendly */
  --t-12:  0.75rem;
  --t-14:  0.875rem;
  --t-16:  1rem;
  --t-18:  1.125rem;
  --t-21:  1.3125rem;
  --t-26:  1.625rem;
  --t-32:  2rem;
  --t-40:  2.5rem;
  --t-52:  3.25rem;
  --t-64:  4rem;
  --t-80:  5rem;
  --t-104: 6.5rem;

  /* Line heights */
  --lh-display: 0.96;
  --lh-snug:    1.14;
  --lh-default: 1.5;
  --lh-loose:   1.75;

  /* Weights */
  --w-light:    300;
  --w-regular:  400;
  --w-medium:   500;
  --w-semibold: 600;

  /* Tracking */
  --track-display: -0.02em;
  --track-body:    0;
  --track-eyebrow: 0.22em;
  --track-arabic:  0;

  /* OpenType — request the features that make this typography sing */
  --otf-display: "kern", "liga", "calt", "onum", "smcp";
  --otf-body:    "kern", "liga", "calt", "ss01";

  /* ─── SPACING — strict 8pt scale ───────────────────────────── */
  --s-0:  0;
  --s-1:  0.5rem;     /*   8px */
  --s-2:  1rem;       /*  16px */
  --s-3:  1.5rem;     /*  24px */
  --s-4:  2rem;       /*  32px */
  --s-5:  3rem;       /*  48px */
  --s-6:  4rem;       /*  64px */
  --s-7:  6rem;       /*  96px */
  --s-8:  8rem;       /* 128px */
  --s-9:  12rem;      /* 192px */

  /* Containers */
  --max-w:        78rem;          /* 1248px — generous luxury frame */
  --max-w-prose:  42rem;          /*  672px — comfortable line length */
  --max-w-narrow: 32rem;          /*  512px */
  --gutter:       clamp(1.25rem, 4vw, 4rem);

  /* Section vertical rhythm */
  --section-y:    clamp(4rem, 9vw, 9rem);

  /* ─── RADIUS — luxury restraint = square corners ───────────── */
  --r-0:  0;
  --r-1:  2px;            /* form inputs only */
  --r-pill: 9999px;       /* reserved; avoid in v2 */

  /* ─── SHADOW — used very sparingly ─────────────────────────── */
  --shadow-rule: 0 1px 0 0 var(--rule);
  --shadow-soft: 0 24px 48px -28px color-mix(in oklab, var(--charcoal) 22%, transparent);

  /* ─── MOTION ───────────────────────────────────────────────── */
  --d-1: 200ms;             /* state transitions only (hover, focus) */
  --d-2: 400ms;
  --d-3: 600ms;             /* default page motion */
  --d-4: 900ms;
  --d-5: 1200ms;            /* signature reveals */

  --ease-out:    cubic-bezier(.22,.61,.36,1);   /* signature */
  --ease-in-out: cubic-bezier(.65,.05,.36,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  /* DO NOT use: linear, ease, ease-in, ease-out (CSS defaults) */

  /* ─── Z-INDEX scale ────────────────────────────────────────── */
  --z-base:     0;
  --z-raised:   1;
  --z-sticky:   50;
  --z-nav:      100;
  --z-overlay:  200;
  --z-modal:    300;
  --z-toast:    400;
}

/* Breakpoints (literal values — used in @media queries):
   sm   640px
   md   768px
   lg  1024px
   xl  1280px
   2xl 1536px
*/