/* ============================================================
   Smith Product Sense — design tokens
   Derived from the "Dusty Blue × Warm Taupe" brand lookbook.

   Every color, type, spacing, radius and motion value in the app
   comes from this file. Nothing else hardcodes a hex, a font name,
   a radius or a spacing value.

   Where a value departs from the lookbook it is marked ADAPTED and
   the reason is given. All departures are accessibility fixes or
   fill a gap the lookbook did not cover.

   NOTE: this is a byte-for-byte copy of /css/tokens.css at the repo
   root (the OS app). The public site under /site is deployed as its
   own Vercel project rooted here, so it can't reach outside this
   folder at build time — the file has to be duplicated, not shared.
   If the OS's tokens.css changes, copy the change here too so the
   public site and the app stay on the same brand.
   ============================================================ */

/* ----- Fonts (Google Fonts) ---------------------------------
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500&family=DM+Sans:wght@300;400;500;600;700&family=DM+Mono:wght@400;500&display=swap" rel="stylesheet">
   ----------------------------------------------------------- */

:root {
  /* ============ COLOR ============ */

  /* Peach — the constant brand accent.
     Only peach-700 and darker may carry text or act as a button ground.
     peach-500 (the lookbook's --peach-mid) is 2.64:1 against both white and
     black, so the lookbook's primary CTA — white on peach-mid — is unreadable
     at AA. Here peach-500 and lighter are decorative only: fills, rules and
     borders, never text and never a button ground. */
  --peach-900: #8A4226;   /* ADAPTED: derived, for pressed states */
  --peach-800: #9E4E2E;   /* ADAPTED: derived, one step darker than the
                             lookbook's peach-deep. Needed because #B85C38
                             is 3.6:1 on the page ground — fine on white,
                             short of AA on sand. Used for brand-colored
                             TEXT; the lookbook's own peach-deep is kept
                             for button grounds, where it does pass. */
  --peach-700: #B85C38;   /* the lookbook accent — button/fill ground */
  --peach-600: #C96A47;
  --peach-500: #E3876A;   /* decorative only */
  --peach-400: #F0A882;   /* decorative only */
  --peach-300: #F7C4AD;   /* decorative only */
  --peach-100: #FCEEE6;
  --peach-50:  #F7EDE5;

  /* Dusty blue — the dark ground */
  --blue-900: #2E4A6B;
  --blue-500: #5A7FA8;
  --blue-300: #A8BDD0;
  --blue-200: #C9D3DD;
  --blue-100: #D8E6F0;

  /* Warm taupe — text and structural lines */
  --ink-900: #3A332E;
  --ink-800: #4A3F37;
  --ink-700: #5C4A3A;
  --ink-500: #7A6150;
  --ink-400: #8A7E76;
  --ink-300: #9E7E6A;   /* 3.7:1 on white — large text and borders only */
  --ink-200: #CDB8A8;
  --ink-100: #E4DAD1;

  /* Sand — page and surface neutrals */
  --sand-300: #E9E5DF;  /* page shell */
  --sand-200: #EDE6DF;
  --sand-100: #F1EBE3;  /* inset surface */
  --sand-50:  #F7F3EF;  /* cream */
  --canvas:   #FFFFFF;

  /* Status.
     ADAPTED: the lookbook defines no status colors. These are earthy tones
     chosen to sit with the palette rather than traffic-light brights, and
     each is verified against the surfaces it is used on. Error is a deeper,
     browner brick than the peach accent so "something is wrong" never reads
     as "this is branded". */
  --olive-700: #4F6238;
  --olive-100: #E6EADD;
  --amber-700: #8A5A1B;
  --amber-100: #F6E9D4;
  --brick-700: #8E3222;
  --brick-100: #F4DED8;

  /* ============ SEMANTIC ALIASES ============ */

  --bg-page:        var(--sand-300);
  --bg-surface:     var(--canvas);
  --bg-inset:       var(--sand-100);
  --bg-cream:       var(--sand-50);
  --bg-dark:        var(--blue-900);
  --bg-hover:       rgba(58, 51, 46, 0.05);
  --bg-pressed:     rgba(58, 51, 46, 0.09);

  --fg-default:     var(--ink-900);
  --fg-muted:       var(--ink-500);
  /* ink-400 is 3.9:1 on white and 3.1:1 on sand — large text and decoration
     only. Small meta text uses ink-500, which clears AA on every surface. */
  --fg-subtle:      var(--ink-500);
  --fg-onbrand:     var(--canvas);
  --fg-ondark:      var(--sand-50);
  --fg-ondark-muted:var(--blue-200);

  --border-subtle:  var(--ink-200);   /* decorative dividers */
  --border-default: var(--ink-300);   /* inputs and controls — 3.7:1 on surface */
  --border-strong:  var(--ink-500);

  --brand:          var(--peach-700);   /* button and fill GROUND (white on it: 4.5:1) */
  --brand-hover:    var(--peach-800);
  --brand-pressed:  var(--peach-900);
  --brand-text:     var(--peach-800);   /* brand-colored TEXT on light surfaces */
  --brand-bg:       var(--peach-100);
  --brand-decor:    var(--peach-500);   /* fills and rules only, never text */

  --info:           var(--blue-900);
  --info-bg:        var(--blue-100);
  --success:        var(--olive-700);
  --success-bg:     var(--olive-100);
  --warning:        var(--amber-700);
  --warning-bg:     var(--amber-100);
  --error:          var(--brick-700);
  --error-bg:       var(--brick-100);

  --focus-ring:     0 0 0 3px var(--peach-300), 0 0 0 4px var(--peach-700);

  /* ============ TYPE ============ */
  --font-display:   'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
  --font-body:      'DM Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono:      'DM Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Type scale.
     ADAPTED: the lookbook's label sizes bottom out at 8px, which is below a
     usable reading size and fails at arm's length on a phone. The scale is
     floored at 12px for the smallest label and 15px for body; the editorial
     proportions are preserved by keeping the large display sizes intact. */
  --type-display-xl: 64px;
  --type-display-l:  52px;
  --type-display-m:  40px;
  --type-h1:         32px;
  --type-h2:         24px;
  --type-h3:         19px;
  --type-h4:         17px;
  --type-body:       15px;
  --type-body-sm:    14px;
  --type-caption:    13px;
  --type-micro:      12px;   /* floor — was 8px in the lookbook */

  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-default: 1.5;
  --lh-relaxed: 1.7;

  --ls-tight:   -0.02em;
  --ls-snug:    -0.01em;
  --ls-default: 0;
  --ls-wide:    0.08em;
  --ls-eyebrow: 0.18em;   /* the lookbook's wide mono tracking, kept */

  /* ============ SPACING (4px base) ============ */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-24:  96px;
  --space-32:  128px;

  /* ============ RADII ============
     The lookbook is square throughout — no rounded corners anywhere. That
     sharpness is a deliberate part of the editorial register, so it is kept.
     --radius-pill exists only for status badges, where a pill reads as a
     state rather than a control. */
  --radius-none: 0;
  --radius-sm:   0;
  --radius-md:   0;
  --radius-lg:   0;
  --radius-pill: 999px;

  /* ============ BORDERS ============
     ADAPTED: the lookbook draws 0.5px hairlines. Sub-pixel borders vanish
     entirely on 1x displays, so the hairline is 1px. */
  --hairline: 1px;
  --rule-strong: 3px;   /* the hero's top accent rule */

  /* ============ SHADOWS (minimal) ============ */
  --shadow-sm: 0 1px 3px rgba(58, 51, 46, 0.06);
  --shadow-md: 0 4px 14px rgba(58, 51, 46, 0.10);

  /* ============ MOTION ============ */
  --ease-out:      cubic-bezier(0.2, 0, 0, 1);
  --ease-in:       cubic-bezier(0.4, 0, 1, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;
}

/* ============================================================
   Base
   ============================================================ */

html, body {
  background: var(--bg-page);
  color: var(--fg-default);
  font-family: var(--font-body);
  font-size: var(--type-body);
  line-height: var(--lh-default);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--peach-100);
  color: var(--ink-900);
}

/* ============================================================
   Semantic typography classes
   ============================================================ */

.display-xl, .display-l, .display-m, .h1-display {
  font-family: var(--font-display);
  font-weight: 300;
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-tight);
  color: var(--ink-900);
}
.display-xl { font-size: var(--type-display-xl); }
.display-l  { font-size: var(--type-display-l); }
.display-m  { font-size: var(--type-display-m); }
.h1-display { font-size: var(--type-h1); }

/* Headings use the display serif — the lookbook leads with Cormorant
   everywhere structural, and reserves DM Sans for running text. */
.h1, .h2, .h3 {
  font-family: var(--font-display);
  color: var(--ink-900);
  font-weight: 400;
  letter-spacing: var(--ls-snug);
  line-height: var(--lh-snug);
}
.h1 { font-size: var(--type-h1); }
.h2 { font-size: var(--type-h2); }
.h3 { font-size: var(--type-h3); }
.h4 {
  font-family: var(--font-body);
  font-size: var(--type-h4);
  font-weight: 600;
  color: var(--ink-900);
  letter-spacing: var(--ls-snug);
  line-height: var(--lh-snug);
}

.body        { font-size: var(--type-body);    line-height: var(--lh-default); color: var(--ink-800); }
.body-large  { font-size: 17px;                line-height: var(--lh-relaxed); color: var(--ink-800); }
.body-small  { font-size: var(--type-body-sm); line-height: var(--lh-default); color: var(--ink-800); }
.caption     { font-size: var(--type-caption); line-height: var(--lh-default); color: var(--fg-muted); }
.micro       { font-size: var(--type-micro);   line-height: var(--lh-default); color: var(--fg-muted); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--type-micro);
  font-weight: 500;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--fg-muted);
}

.mono, code, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

.serif-italic {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
}

a {
  color: var(--brand-text);
  text-decoration: underline;
  text-decoration-color: var(--peach-300);
  text-underline-offset: 3px;
  transition: text-decoration-color var(--duration-fast) var(--ease-out);
}
a:hover { text-decoration-color: var(--peach-700); }

hr {
  border: 0;
  border-top: var(--hairline) solid var(--border-default);
  margin: var(--space-8) 0;
}

/* ============================================================
   Utility — focus ring
   ============================================================ */

.focus-ring:focus-visible,
:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}