/* ============================================================
   OSJ Sharp — Design tokens
   ------------------------------------------------------------
   Ported from design_handoff_osj_storefront/design-system/tokens/*.css.
   Everything downstream references the SEMANTIC aliases, never the
   raw scale and never a literal hex.
   ============================================================ */

:root {
  /* ---- Ink — warm near-blacks ---- */
  --ink-950: #0E0B07;
  --ink-900: #14110B;
  --ink-800: #1D1810;
  --ink-700: #2A2317;
  --ink-600: #3A3122;
  --ink-500: #4D4230;

  /* ---- Sand — warm paper/stone neutrals ---- */
  --sand-50:  #FBF7F0;
  --sand-100: #F4EDE0;
  --sand-200: #E8DCC8;
  --sand-300: #D6C5A8;
  --sand-400: #B9A584;
  --sand-500: #94815F;
  --sand-600: #6E5E42;

  /* ---- Amber — molten gold engraving ---- */
  --amber-300: #F0CE84;
  --amber-400: #E6B65C;
  --amber-500: #D69B36;   /* core brand gold */
  --amber-600: #B57C22;
  --amber-700: #8C5E18;

  /* ---- Acrylic — translucent cast-teal, used sparingly ---- */
  --acrylic-300: #7DD6D2;
  --acrylic-400: #45BDB8;
  --acrylic-500: #1F9C97;
  --acrylic-600: #157571;

  /* ---- Walnut / Oak — laser-cut wood line ---- */
  --walnut-500: #6B4A2B;
  --walnut-600: #523619;
  --oak-400:    #C99A5B;
  --oak-300:    #DDB87E;

  /* ---- Signal ---- */
  --signal-green: #4E9D6B;
  --signal-red:   #C9533B;
  --signal-blue:  #4F84B0;

  --white: #FFFFFF;

  /* ============================================================
     COMP RECONCILIATION
     ------------------------------------------------------------
     HANDOFF.md maps each comp literal to a design-system token, but
     eight of those pairs do not actually hold — the DS scale value and
     the value drawn in the comp differ. The comps are the stated visual
     source of truth (README, "Fidelity"), so the comp value wins and is
     recorded here rather than silently drifting into component CSS.

       role                    comp        DS token / value
       ----------------------  ----------  ----------------------------
       primary button hover    #C08828     --amber-600  #B57C22
       link / eyebrow on light #A9741F     --amber-700  #8C5E18
       link hover              #7E5412     (none)
       image-stage surface     #F3EDE1     --sand-100   #F4EDE0
       hairline on light       #E7DECE     --border-subtle rgba(20,17,11,.10)
       body text               #57503F     --ink-700    #2A2317
       muted text              #8A7C63     --sand-600   #6E5E42
       form field border       #D9CDB8     (none)

     Resolve this upstream: either correct the DS scale or correct the
     comps. Until then this block is the single place the two disagree.
     ============================================================ */
  --amber-hover:     #C08828;
  --amber-link:      #A9741F;
  --amber-link-hover:#7E5412;

  /* ---- Brand ---- */
  --brand:        var(--amber-500);
  --brand-hover:  var(--amber-hover);
  --brand-soft:   var(--amber-300);
  --brand-ink:    var(--ink-900);

  /* ---- Surfaces ---- */
  --surface-page:      var(--sand-50);
  --surface-alt:       #F5EFE3;   /* alternating band */
  --surface-card:      var(--white);
  --surface-sunken:    #F3EDE1;   /* image stage inside cards */
  --surface-inverse:   var(--ink-900);
  --surface-inverse-2: #1D1710;   /* panel on ink (newsletter) */
  --surface-inverse-3: #221C12;   /* panel on ink (banner media) */

  /* ---- Text ---- */
  --text-strong:        var(--ink-900);
  --text-body:          #57503F;
  --text-muted:         #8A7C63;
  --text-on-dark:       var(--sand-50);
  --text-on-dark-body:  var(--sand-200);
  --text-on-dark-muted: var(--sand-400);
  --text-on-brand:      var(--ink-900);
  --text-link:          var(--amber-link);
  --text-link-hover:    var(--amber-link-hover);
  --text-eyebrow-dark:  var(--amber-400);  /* eyebrow on ink */

  /* ---- Borders ---- */
  --border-subtle:  #E7DECE;
  --border-field:   #D9CDB8;
  --border-strong:  #C9BCA4;
  --border-hairline:#F0E8DA;
  --border-on-dark:      rgba(251, 247, 240, 0.14);
  --border-on-dark-soft: rgba(251, 247, 240, 0.12);
  --border-on-dark-firm: rgba(251, 247, 240, 0.18);
  --border-on-dark-loud: rgba(251, 247, 240, 0.28);
  --border-amber-dark:   rgba(230, 182, 92, 0.24);

  /* ---- Price ---- */
  --price:      var(--ink-900);
  --price-sale: var(--signal-red);

  /* ---- Feedback ---- */
  --success: var(--signal-green);
  --danger:  var(--signal-red);
  --info:    var(--signal-blue);

  /* ============================================================
     Typography
     ============================================================ */
  --font-display: 'Archivo', 'Arial Narrow', system-ui, sans-serif;
  --font-body:    'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --font-mono:    'IBM Plex Mono', 'SFMono-Regular', ui-monospace, monospace;

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-black:    800;
  --weight-ultra:    900;

  --text-2xs:  0.6875rem; /* 11px */
  --text-xs:   0.75rem;   /* 12px */
  --text-sm:   0.875rem;  /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-md:   1.125rem;  /* 18px */
  --text-lg:   1.375rem;  /* 22px */
  --text-xl:   1.75rem;   /* 28px */
  --text-2xl:  2.25rem;   /* 36px */
  --text-3xl:  3rem;      /* 48px */

  --leading-none:    1;
  --leading-tight:   1.08;
  --leading-snug:    1.25;
  --leading-normal:  1.55;
  --leading-relaxed: 1.7;

  --tracking-tight:  -0.02em;
  --tracking-snug:   -0.01em;
  --tracking-wide:    0.04em;
  --tracking-wider:   0.12em;  /* mono eyebrows */
  --tracking-widest:  0.18em;  /* section eyebrows */

  /* ============================================================
     Spacing, radius, sizing — 8px rhythm
     ============================================================ */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  2.5rem;
  --space-8:  3rem;
  --space-9:  4rem;
  --space-10: 5rem;
  --space-11: 6rem;

  --radius-xs:   3px;
  --radius-sm:   5px;   /* buttons, inputs, tags */
  --radius-md:   8px;   /* cards */
  --radius-lg:   10px;  /* banner panels, tiles */
  --radius-pill: 999px;
  --radius-round:50%;

  --container-xl: 1320px;
  --container-md: 1160px;  /* checkout */

  --section-block:  88px;  /* section vertical padding */
  --section-inline: 40px;  /* page gutter, desktop */
  --gutter-mobile:  20px;  /* page gutter <= 760px */
  --grid-gap:       24px;

  --header-h: 72px;
  --announce-h: 38px;
  --sticky-offset: 96px;   /* header + breathing room for sticky rails */

  --control-h-sm: 40px;
  --control-h-md: 44px;
  --control-h-lg: 54px;

  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 50;
  --z-announce: 60;
  --z-drawer: 900;
  --z-overlay: 1000;

  /* ============================================================
     Effects
     ============================================================ */
  --shadow-sm: 0 1px 2px rgba(33, 24, 10, 0.06), 0 2px 6px rgba(33, 24, 10, 0.07);
  --shadow-md: 0 2px 4px rgba(33, 24, 10, 0.06), 0 6px 16px rgba(33, 24, 10, 0.10);
  --shadow-lg: 0 4px 8px rgba(33, 24, 10, 0.07), 0 18px 38px rgba(33, 24, 10, 0.14);

  /* Card hover — warm-tinted, never neutral gray */
  --shadow-card-hover: 0 18px 34px -16px rgba(58, 44, 20, 0.34);
  --shadow-hero-cutout: 0 30px 70px -24px rgba(0, 0, 0, 0.85);
  --shadow-drawer: -30px 0 70px -30px rgba(20, 17, 11, 0.5);
  --shadow-on-dark: 0 36px 80px -32px rgba(0, 0, 0, 0.9);

  --focus-glow: 0 0 0 3px rgba(214, 155, 54, 0.38);
  --focus-ring-width: 3px;

  --gradient-ink:  radial-gradient(120% 140% at 12% 0%, var(--ink-700) 0%, var(--ink-900) 48%, var(--ink-950) 100%);
  --gradient-ink-header: radial-gradient(110% 160% at 10% 0%, var(--ink-700) 0%, var(--ink-900) 55%, var(--ink-950) 100%);
  --gradient-ink-band: linear-gradient(180deg, var(--ink-900) 0%, #1B160E 100%);
  --gradient-mark: linear-gradient(150deg, var(--amber-400), #B77E22);

  --glass-panel: rgba(20, 17, 11, 0.86);
  /* A 72px bar can be translucent — there is never much behind it and the
     motion reads well. A full-height sheet of small links cannot: the hero
     headline and the product photography read straight through it, and no
     amount of alpha tuning fixes that, because the problem is that a panel
     600px tall covers content with real contrast in it. Opaque. */
  --panel-solid: var(--ink-950);
  --blur-panel:  saturate(140%) blur(14px);
  --scrim:       rgba(14, 11, 7, 0.55);

  --ease-out:  cubic-bezier(0.2, 0.8, 0.3, 1);
  --ease-snap: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 250ms;
  --dur-reveal: 620ms;
}

/* ------------------------------------------------------------
   Dark scope. The design system sets h1–h6 { color: var(--text-strong) },
   which BEATS inherited colour — a heading on an ink band renders
   ink-on-ink unless the scope re-points --text-strong. Every dark
   section carries data-theme="dark"; this is the one rule that fixes it.
   ------------------------------------------------------------ */
[data-theme="dark"] {
  --surface-page:   var(--ink-900);
  --surface-card:   var(--ink-800);
  --surface-sunken: var(--ink-950);

  --text-strong: var(--sand-50);
  --text-body:   var(--sand-200);
  --text-muted:  var(--sand-400);
  --text-link:   var(--amber-400);
  --text-link-hover: var(--amber-300);

  --border-subtle: var(--border-on-dark-soft);
  --border-field:  var(--border-on-dark-firm);
  --border-strong: var(--border-on-dark-loud);
}