/* Ombra design tokens.
   Fonts: <link href="https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600&display=swap" rel="stylesheet"> */
:root {
  /* ── Surfaces ── black canvas, near-black cards, frosted windows over photos */
  --bg: #05070B;            /* blue-black, the page's own night */
  --surface: #0E0F10;          /* cards on the blue-black */
  --surface-2: #0E0F10;        /* raised card, active tab, inputs (same fill as every card; the line marks it) */
  --surface-3: #1D242C;        /* hover, chips inside windows */
  --glass: rgba(14, 16, 19, .86);   /* product windows over photo plates */
  --glass-2: rgba(28, 31, 35, .8); /* inner panels inside a window */
  --sky-1: #070B10;            /* hero sky, top */
  --sky-2: #16222E;            /* hero sky, middle */
  --sky-3: #34444F;            /* hero sky, horizon (meets the photo) */

  /* ── Text ── white, two greys, one cool display tint */
  --text: #FFFFFF;
  --text-2: #C8CDD2;           /* body on black */
  --text-nav: #DCE1E5;         /* header links */
  --muted-on-glass: #B7BDC3;   /* captions inside product windows */
  --muted: #8C939A;            /* second half of two-tone headings, captions */
  --tint: #EEF4F6;             /* display numbers, hero headline */
  --on-light: #0A0C0E;         /* text on the light pill */

  /* ── Lines ── */
  --line: rgba(255, 255, 255, .10);
  --line-2: rgba(255, 255, 255, .18);
  --line-3: rgba(255, 255, 255, .32); /* illustration strokes */

  /* ── Brand / accent ── one sea-glass accent: dots, toggles, status, one tab underline. Never headings or big fills. */
  --accent: #3FB7A6;
  --accent-rgb: 63, 183, 166;
  --accent-ink: #6FD3C4;       /* accent used as text on black */
  --accent-soft: rgba(63, 183, 166, .16);
  --on-accent: #04201C;

  /* ── Data / status (mock-ups only) ── */
  --success: #4CC38A; --warning: #E8B44C; --danger: #E5675E; --info: #6AA9F0;

  /* ── Fonts ── */
  --font: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;

  /* ── Radii ── */
  --r-xs: 6px; --r-sm: 10px; --r: 16px; --r-win: 20px; --r-lg: 24px; --r-pill: 9999px;

  /* ── Spacing / layout ── 1094 content, 176 section rhythm */
  --container: 1094px;
  --gutter: 24px;
  --section: 176px;
  --head-gap: 72px;            /* section head → content */
  --gap: 16px;

  /* ── Shadows ── */
  --shadow-1: 0 1px 0 rgba(255,255,255,.06) inset, 0 12px 32px rgba(0,0,0,.35);
  --shadow-2: 0 1px 0 rgba(255,255,255,.08) inset, 0 40px 90px rgba(0,0,0,.55);
  --glow: radial-gradient(420px at 0 0, rgba(255,255,255,.14), rgba(255,255,255,0));
  --horizon: linear-gradient(90deg, rgba(238,244,246,0), var(--accent-ink) 35%, var(--tint) 65%, rgba(238,244,246,0)); /* the horizon edge on windows and labels */
  --grain-opacity: .045;

  /* ── Motion ── */
  --ease: cubic-bezier(.25, .46, .45, .94); --ease-out: cubic-bezier(.16, 1, .3, 1); --dur: .6s;
}

/* ── Type scale ── one family, 400/500, tight tracking on everything above 24px */
.t-display { font: 400 144px/1 var(--font-display); letter-spacing: -.065em; color: var(--tint); }
.t-h1 { font: 400 58px/1.12 var(--font-display); letter-spacing: -.04em; color: var(--tint); text-wrap: balance; }
.t-h2 { font: 500 40px/1.22 var(--font-display); letter-spacing: -.04em; color: var(--text); text-wrap: balance; }
.t-h3 { font: 500 24px/1.4 var(--font-display); letter-spacing: -.03em; color: var(--text); text-wrap: balance; }
.t-h4 { font: 500 17px/1.45 var(--font); letter-spacing: -.01em; color: var(--text); }
.t-lead { font: 400 18px/1.55 var(--font); letter-spacing: -.01em; color: var(--text-2); }
.t-body { font: 400 16px/1.55 var(--font); letter-spacing: -.01em; color: var(--text-2); }
.t-small { font: 400 14px/1.5 var(--font); letter-spacing: -.01em; color: var(--muted); }
.t-label { font: 500 13px/1.3 var(--font); letter-spacing: -.005em; color: var(--text-2); }
.dim { color: var(--muted); }

/* ── Motion off: reduced motion + ?static (the JS adds .static to <html>) ── */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }
.static *, .static *::before, .static *::after { transition: none !important; animation: none !important; }