/* Tiasoa — tokens. Light is the desk. Night is [data-theme="dark"]. */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("fonts/BricolageGrotesque.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Satoshi;
  src: url("fonts/Satoshi-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Satoshi;
  src: url("fonts/Satoshi-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Satoshi;
  src: url("fonts/Satoshi-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Geist Mono";
  src: url("fonts/GeistMono-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --night: #0a1a2f;
  --night-raised: #12263c;
  --frost: #93dbe4;
  --frost-ink: #1a6570;
  --ice: #e8f5f6;
  --paper: #ffffff;
  --alert: #f2711c;
  --alert-ink: #b04e10;
  --handled: #0e6a4c;
  --handled-on-night: #5ebe96;
  --alarm: #9d1c3a;
  --alarm-on-night: #f0b4ae;
  --muted: #4a6274;
  --muted-on-night: #b7cdd6;
  --line: #d3e3e6;
  --line-on-night: #2a4660;
  --alert-wash: #fbf6f1;
  --handled-wash: #e8f6ef;
  --alarm-wash: #f8eeef;
  --ink-black: #000000;

  --bg: var(--ice);
  --surface: var(--paper);
  --ink: var(--night);
  --ink-muted: var(--muted);
  --link: var(--frost-ink);
  --focus: var(--frost-ink);
  --status-alert: var(--alert-ink);
  --status-handled: var(--handled);
  --status-alarm: var(--alarm);

  --font-display: "Bricolage Grotesque", sans-serif;
  --font-body: Satoshi, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, monospace;

  /* Fluid editorial type scale */
  --fs-mono: clamp(0.875rem, 0.8rem + 0.25vw, 1rem);
  --fs-small: clamp(0.95rem, 0.9rem + 0.25vw, 1.0625rem);
  --fs-body: clamp(1.0625rem, 0.95rem + 0.5vw, 1.25rem); /* never under 17px */
  --fs-lead: clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem);
  --fs-h3: clamp(1.375rem, 1.1rem + 1.2vw, 2rem);
  --fs-h2: clamp(2rem, 1.4rem + 2.8vw, 3.75rem);
  --fs-display: clamp(3rem, 1.6rem + 6.5vw, 8.5rem); /* hero title */

  /* Back-compat aliases used across the site */
  --text-display: var(--fs-display);
  --text-title: var(--fs-h2);
  --text-heading: var(--fs-h3);
  --text-body: var(--fs-body);
  --text-label: var(--fs-small);
  --text-measure: var(--fs-lead);

  --leading-display: 0.92;
  --leading-title: 1.06;
  --leading-heading: 1.25;
  --leading-body: 1.6;
  --leading-measure: 1.05;

  --tracking-display: -0.035em; /* tighter hero */
  --tracking-title: -0.025em;   /* h2 */
  --tracking-body: 0em;

  --weight-display: 760; /* bold, editorial */
  --weight-title: 700;
  --weight-heading: 700;
  --weight-body: 400;
  --weight-label: 500;
  --weight-measure: 500;

  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4.5rem;
  --space-3xl: 6rem;

  --radius-control: 12px;
  --radius-card: 16px;
  --radius-sheet: 20px;

  --shadow-card: 0 18px 40px -22px rgb(10 26 47 / 0.38);
  --shadow-pop: 0 28px 60px -28px rgb(10 26 47 / 0.48);
  --shadow-night: 0 22px 48px -18px rgb(0 0 0 / 0.5);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --motion-duration-fast: 160ms;
  --motion-duration: 240ms;
  --motion-duration-draw: 900ms;
  --motion-duration-breath: 2.8s;

  --control-height: 48px;
  --measure: 62ch; /* paragraphs */
  --page: 1320px;  /* used by legal pages header */

  color-scheme: light;
}

[data-theme="dark"] {
  --bg: var(--night);
  --surface: var(--night-raised);
  --ink: var(--ice);
  --ink-muted: var(--muted-on-night);
  --link: var(--frost);
  --focus: var(--frost);
  --status-alert: var(--alert);
  --status-handled: var(--handled-on-night);
  --status-alarm: var(--alarm-on-night);
  --line: var(--line-on-night);
  --shadow-card: 0 22px 48px -18px rgb(0 0 0 / 0.5);
  color-scheme: dark;
}

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

html {
  scrollbar-color: #5e7e8c var(--bg);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--weight-body);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: var(--frost);
  color: var(--night);
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

:where(a) {
  color: var(--link);
  text-underline-offset: 0.18em;
}

:where(h1, h2, h3) {
  text-wrap: balance;
}

@keyframes tiasoa-draw {
  to { stroke-dashoffset: 0; }
}

@keyframes tiasoa-breath {
  0% { transform: scale(1); opacity: 0.5; }
  75% { transform: scale(2.15); opacity: 0; }
  100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-duration-fast: 0ms;
    --motion-duration: 0ms;
    --motion-duration-draw: 0ms;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}