/* /OS17 Design System
 * Tokens: color, type, spacing, radii, shadows, motion
 *
 * Type: Geist (Vercel), the brand sans, served from /fonts/.
 * Geist is a tight, geometric, low-contrast grotesque, exactly the
 * editorial-meets-software register the brand wants. We load the variable
 * font for the full 100–900 axis, plus a static-bold fallback for browsers
 * that drop variable support. There is no display/body split; weight does
 * the work (400 for headlines, 200 for body, 500 for UI).
 */

/* Variable font (preferred). Covers weights 100–900 in a single file. */
@font-face {
  font-family: 'Geist';
  src: url('fonts/geist-variablefont_wght.ttf') format('truetype-variations'),
       url('fonts/geist-variablefont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Static fallbacks, used by browsers that ignore variable fonts.
 * Each maps to its specific weight so font-weight values still resolve. */
@font-face { font-family: 'Geist'; src: url('fonts/geist-extralight.ttf') format('truetype'); font-weight: 200; font-display: swap; }
@font-face { font-family: 'Geist'; src: url('fonts/geist-light.ttf')      format('truetype'); font-weight: 300; font-display: swap; }
@font-face { font-family: 'Geist'; src: url('fonts/geist-regular.ttf')    format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Geist'; src: url('fonts/geist-medium.ttf')     format('truetype'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Geist'; src: url('fonts/geist-semibold.ttf')   format('truetype'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Geist'; src: url('fonts/geist-bold.ttf')       format('truetype'); font-weight: 700; font-display: swap; }

:root {
  /* ── Color ─────────────────────────────────────────────── */
  --ink:    #202020;
  --chalk:  #F2F2F2;     /* the only light surface in the system */
  /* --paper / --card retained as ALIASES for --chalk so existing markup
   * keeps working. There is no white in /OS17 \u2014 anywhere. */
  --paper:  var(--chalk);
  --card:   var(--chalk);
  --amber:  #FFB803;
  --blue:   #0688F0;
  --coral:  #FF573C;
  --green:  #008848;

  /* Foreground tokens (against Paper / Chalk) */
  --fg-1: #202020;                 /* primary text */
  --fg-2: rgba(32, 32, 32, 0.68);  /* secondary text */
  --fg-3: rgba(32, 32, 32, 0.48);  /* micro labels, meta */
  --fg-4: rgba(32, 32, 32, 0.20);  /* dividers */
  --fg-on-ink-1:  #F2F2F2;
  --fg-on-ink-2:  rgba(242, 242, 242, 0.72);
  --fg-on-ink-3:  rgba(242, 242, 242, 0.48);

  /* Surface tokens */
  --surface-page:    var(--chalk);    /* default page background */
  --surface-card:    var(--card);     /* cards / elevated surfaces */
  --surface-inverse: var(--ink);

  /* Phase color binding (numbered cards) */
  --phase-01: var(--ink);
  --phase-02: var(--coral);
  --phase-03: var(--amber);
  --phase-04: var(--green);
  --action:   var(--blue);

  /* Hairline border, used sparingly. Width is 2px, visibly present,
   * since it's the only separator the system uses (no shadows). */
  --hairline: rgba(32, 32, 32, 0.10);

  /* ── Type ──────────────────────────────────────────────── */
  --font-display: 'Geist', system-ui, -apple-system, 'Helvetica Neue', sans-serif;
  --font-body:    'Geist', system-ui, -apple-system, 'Helvetica Neue', sans-serif;
  --font-mono:    'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Scale (px) */
  --t-display-xl: 160px;
  --t-display-lg: 120px;
  --t-display:    96px;
  --t-display-sm: 72px;
  --t-headline:   48px;
  --t-headline-sm:36px;
  --t-title:      24px;
  --t-title-sm:   20px;
  --t-body-lg:    18px;
  --t-body:       16px;
  --t-body-sm:    14px;
  --t-micro:      11px;

  /* Tracking */
  --tr-display: -0.02em;
  --tr-headline:-0.015em;
  --tr-title:   -0.005em;
  --tr-body:     0;
  --tr-micro:    0.12em;

  /* Line height */
  --lh-display: 0.95;
  --lh-headline:1.05;
  --lh-title:   1.2;
  --lh-body:    1.5;
  --lh-micro:   1.2;

  /* ── Spacing (4px base) ────────────────────────────────── */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;
  --sp-30: 120px;

  /* ── Radii ─────────────────────────────────────────────── */
  /* ── Radii ───────────────────────────────────────────────────── */
  /* Single unified radius across the system. The only exception is --r-chip,
   * which must be 9999px to render as a pill. */
  --r-tile:    32px;
  --r-card:    32px;
  --r-input:   32px;
  --r-chip:    9999px;

  /* ── Shadows: NONE.
   * Surfaces are flat. Use a 2px hairline border (`--hairline` color)
   * when a card sits on the same fill as the page. */

  /* ── Motion ────────────────────────────────────────────── */
  --dur-press: 120ms;
  --dur-fast:  200ms;
  --dur-base:  320ms;
  --dur-slow:  600ms;
  --ease-out:  cubic-bezier(0.2, 0, 0, 1);
  --ease-in:   cubic-bezier(0.4, 0, 1, 1);
  --ease-io:   cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Layout ────────────────────────────────────────────── */
  --content-max: 1280px;
  --gutter-lg:   80px;
  --gutter-sm:   24px;
}

/* ── Base ────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--surface-page);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  /* Body default is ExtraLight (200). Headlines step up to Regular (400).
   * UI/buttons sit at Medium (500). Micro labels at Regular (400). */
  font-weight: 200;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--ink); color: var(--paper); }
.t-display-xl,
.t-display-lg,
.t-display,
.t-display-sm,
.t-headline,
.t-headline-sm,
.t-title,
.t-title-sm {
  font-family: var(--font-display);
  font-weight: 400;
  text-wrap: balance;
}

.t-display-xl { font-size: var(--t-display-xl); letter-spacing: var(--tr-display); line-height: var(--lh-display); }
.t-display-lg { font-size: var(--t-display-lg); letter-spacing: var(--tr-display); line-height: var(--lh-display); }
.t-display    { font-size: var(--t-display);    letter-spacing: var(--tr-display); line-height: var(--lh-display); }
.t-display-sm { font-size: var(--t-display-sm); letter-spacing: var(--tr-display); line-height: var(--lh-display); }
.t-headline   { font-size: var(--t-headline);   letter-spacing: var(--tr-headline);line-height: var(--lh-headline); }
.t-headline-sm{ font-size: var(--t-headline-sm);letter-spacing: var(--tr-headline);line-height: var(--lh-headline); }
.t-title      { font-size: var(--t-title);      letter-spacing: var(--tr-title);   line-height: var(--lh-title); }
.t-title-sm   { font-size: var(--t-title-sm);   letter-spacing: var(--tr-title);   line-height: var(--lh-title); }

.t-body-lg { font-size: var(--t-body-lg); line-height: var(--lh-body); }
.t-body    { font-size: var(--t-body);    line-height: var(--lh-body); }
.t-body-sm { font-size: var(--t-body-sm); line-height: var(--lh-body); color: var(--fg-2); }

.t-micro {
  font-size: var(--t-micro);
  letter-spacing: var(--tr-micro);
  line-height: var(--lh-micro);
  text-transform: uppercase;
  font-weight: 400;
  color: var(--fg-3);
}