/* =============================================================
   DIRECTION 88 — Foundations
   Typography + Color tokens, plus radius/shadow/spacing primitives.

   Two families. One radius. Glass over video.
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@1&family=Barlow:wght@300;400;500;600&display=swap');

:root {
  /* -----------------------------------------------------------
     CORE PALETTE
     The brand is monochrome-first. Color is a discipline, not a
     decoration. Ink, paper, and the temperatures between them.
     ----------------------------------------------------------- */

  /* Foundational neutrals */
  --ink-1000: #0A0A0A;   /* near-black, primary text on light */
  --ink-900:  #141414;   /* surface dark */
  --ink-700:  #2B2B2B;   /* secondary text on light */
  --ink-500:  #6B6B6B;   /* tertiary / metadata */
  --ink-300:  #B5B3AE;   /* disabled / hairlines on light */
  --ink-200:  #DAD7D1;   /* dividers on light */

  --paper-50:  #FAF8F4;  /* primary light surface — warm paper */
  --paper-100: #F2EFE9;  /* secondary light surface */
  --paper-200: #E7E3DA;  /* card on paper / elevated surface */
  --paper-0:   #FFFFFF;  /* pure white, used in glass + buttons */

  /* Accent — used sparingly, ONE accent only */
  --signal:        #FF7F00; /* signal orange — used in active states, key marks */
  --signal-soft:   rgba(255, 127, 0, 0.12);

  /* -----------------------------------------------------------
     SEMANTIC FOREGROUND / BACKGROUND
     Use these for nearly all UI. Switch between modes by
     swapping a single block, not by remapping per-component.
     ----------------------------------------------------------- */

  /* Light mode (default — paper) */
  --bg:           var(--paper-50);
  --bg-elevated:  var(--paper-100);
  --bg-sunken:    var(--paper-200);

  --fg-1: var(--ink-1000);  /* primary text, headings */
  --fg-2: var(--ink-700);   /* body */
  --fg-3: var(--ink-500);   /* secondary / meta */
  --fg-4: var(--ink-300);   /* placeholder, hint, disabled */

  --hairline:    rgba(10, 10, 10, 0.10);
  --hairline-2:  rgba(10, 10, 10, 0.06);

  /* -----------------------------------------------------------
     TYPOGRAPHY
     Two families. Hard rules.
       font-heading = Instrument Serif, italic 400, ALWAYS.
       font-body    = Barlow, 300/400/500/600.
     Never upright Instrument Serif. Never Barlow for display.
     ----------------------------------------------------------- */
  --font-heading: 'Instrument Serif', 'Cormorant Garamond', 'Times New Roman', serif;
  --font-body:    'Barlow', 'Helvetica Neue', system-ui, sans-serif;
  --font-mono:    ui-monospace, 'JetBrains Mono', 'SF Mono', Menlo, monospace;

  /* Type scale (display-led) */
  --t-display-2xl: clamp(72px, 11vw, 184px); /* hero */
  --t-display-xl:  clamp(56px, 8vw,  136px);
  --t-display-lg:  clamp(44px, 6vw,  96px);
  --t-display-md:  clamp(34px, 4.4vw, 68px);
  --t-h1: 56px;
  --t-h2: 40px;
  --t-h3: 30px;
  --t-h4: 22px;
  --t-body-lg: 19px;
  --t-body:    16px;
  --t-body-sm: 14px;
  --t-eyebrow: 12px;
  --t-micro:   11px;

  /* Line heights (display tight, body airy) */
  --lh-display: 0.95;
  --lh-tight:   1.1;
  --lh-body:    1.55;
  --lh-loose:   1.7;

  /* Letter spacing — Barlow eyebrows are wide-tracked */
  --ls-eyebrow:   0.18em;
  --ls-button:    0.04em;
  --ls-display:  -0.01em;

  /* -----------------------------------------------------------
     RADIUS — pill-by-default
     Override locally where it doesn't make sense (textareas,
     full-bleed sections).
     ----------------------------------------------------------- */
  --radius:        9999px;
  --radius-sm:     9999px;
  --radius-card:   24px;   /* explicit override for surfaces */
  --radius-sheet:  32px;
  --radius-tight:  6px;    /* for inputs that look weird as pills (e.g. textareas) */

  /* -----------------------------------------------------------
     SPACING (8pt grid, dense top, airy bottom)
     ----------------------------------------------------------- */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 144px;

  /* -----------------------------------------------------------
     ELEVATION
     Soft, low-contrast shadows. Brand is editorial, not neumorphic.
     ----------------------------------------------------------- */
  --shadow-1: 0 1px 2px rgba(10,10,10,0.04), 0 1px 1px rgba(10,10,10,0.03);
  --shadow-2: 0 6px 18px rgba(10,10,10,0.06), 0 2px 4px rgba(10,10,10,0.04);
  --shadow-3: 0 24px 48px rgba(10,10,10,0.10), 0 8px 16px rgba(10,10,10,0.06);
  --shadow-glass: 0 1px 0 rgba(255,255,255,0.35) inset, 0 0 0 1px rgba(255,255,255,0.18) inset, 0 12px 40px rgba(10,10,10,0.18);

  /* -----------------------------------------------------------
     MOTION
     Brand is calm. No bounces. Editorial easing.
     ----------------------------------------------------------- */
  --ease-standard: cubic-bezier(0.2, 0.0, 0.0, 1.0);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 140ms;
  --dur-base: 240ms;
  --dur-slow: 480ms;
}

/* Dark mode — for video-backed hero sections, mostly */
.is-dark, [data-theme="dark"] {
  --bg:           var(--ink-1000);
  --bg-elevated:  var(--ink-900);
  --bg-sunken:    #050505;

  --fg-1: var(--paper-50);
  --fg-2: rgba(250, 248, 244, 0.78);
  --fg-3: rgba(250, 248, 244, 0.58);
  --fg-4: rgba(250, 248, 244, 0.30);

  --hairline:   rgba(255,255,255,0.12);
  --hairline-2: rgba(255,255,255,0.06);
}

/* =============================================================
   SEMANTIC TYPOGRAPHIC ROLES
   These are the elements designs should reach for.
   ============================================================= */

.t-display-2xl,
.t-display-xl,
.t-display-lg,
.t-display-md,
.t-h1, .t-h2, .t-h3, .t-h4 {
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 400;
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  color: var(--fg-1);
  text-wrap: balance;
}

.t-display-2xl { font-size: var(--t-display-2xl); }
.t-display-xl  { font-size: var(--t-display-xl); }
.t-display-lg  { font-size: var(--t-display-lg); }
.t-display-md  { font-size: var(--t-display-md); line-height: var(--lh-tight); }

.t-h1 { font-size: var(--t-h1); line-height: var(--lh-tight); }
.t-h2 { font-size: var(--t-h2); line-height: var(--lh-tight); }
.t-h3 { font-size: var(--t-h3); line-height: 1.15; }
.t-h4 { font-size: var(--t-h4); line-height: 1.2; }

.t-body-lg, .t-body, .t-body-sm {
  font-family: var(--font-body);
  font-weight: 300;
  line-height: var(--lh-body);
  color: var(--fg-2);
  text-wrap: pretty;
}
.t-body-lg { font-size: var(--t-body-lg); }
.t-body    { font-size: var(--t-body); }
.t-body-sm { font-size: var(--t-body-sm); line-height: 1.5; }

.t-ui {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--t-body-sm);
  line-height: 1.4;
  color: var(--fg-1);
}

.t-label, .t-button {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--t-body-sm);
  line-height: 1;
  letter-spacing: var(--ls-button);
  color: var(--fg-1);
}

.t-eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--t-eyebrow);
  line-height: 1;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--fg-3);
}

.t-micro {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--t-micro);
  letter-spacing: 0.04em;
  color: var(--fg-3);
}

/* Default elements adopt the system without classes */
html, body {
  background: var(--bg);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--t-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 400;
  letter-spacing: var(--ls-display);
  color: var(--fg-1);
  margin: 0;
}
h1 { font-size: var(--t-h1); line-height: var(--lh-tight); }
h2 { font-size: var(--t-h2); line-height: var(--lh-tight); }
h3 { font-size: var(--t-h3); line-height: 1.15; }
h4 { font-size: var(--t-h4); line-height: 1.2; }

p { margin: 0; }
a { color: inherit; text-decoration: none; }

/* =============================================================
   GLOBAL RADIUS
   Unless overridden, things are pills.
   ============================================================= */
button, input, select, .pill, .chip { border-radius: var(--radius); }
textarea { border-radius: var(--radius-tight); }
.card, .surface { border-radius: var(--radius-card); }