/* Sinthropy design tokens.
   Source of truth: company-core/resources/sinthropy/branding.md + branding creation/typography.md,
   and the website design handoff (workspaces/design/05_handoff). Change brand values there first.
   Tokens are named by function, never by appearance. Palette stays monochrome
   Porcelain & Ink with one accent per view (Apple-style restraint). */

/* Inter, self-hosted (SIL OFL 1.1, see /assets/fonts/LICENSE.txt). One variable file: weights 100–900 + opsz. */
@font-face {
  font-family: "InterVariable";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/InterVariable.woff2") format("woff2");
}

:root {
  /* ---- colour — light theme (Porcelain & Ink) ---- */
  --bg: #F5F5F4;           /* Porcelain — page ground */
  --surface: #FFFFFF;      /* cards, panels */
  --surface-2: #FAFAF9;    /* recessed / quiet fills */
  --text: #1D1D1F;         /* Ink — primary text, wordmark */
  --muted: #6E6E73;        /* Grey — secondary text */
  --faint: #A1A1A6;        /* tertiary text, quiet geometry */
  --line: #E6E6E3;         /* hairline dividers */
  --line-strong: #D7D7D3;  /* emphasised hairline */
  --accent: #0071E3;       /* Sinthropy Blue — the single proof accent (fills) */
  --accent-press: #005FBF; /* pressed / active */
  --accent-text: #0066CC;  /* accent as text: AA on porcelain (5.1:1) */
  --on-accent: #FFFFFF;
  --thread: #8A8A8F;       /* the convergence thread and nodes: ~3.1:1 on porcelain */
  --shadow: 0 1px 2px rgba(29, 29, 31, .04), 0 10px 30px -12px rgba(29, 29, 31, .12);
  --shadow-sm: 0 1px 2px rgba(29, 29, 31, .05);

  /* ---- type — Inter everywhere, identical on every platform ---- */
  --font: "InterVariable", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* seven roles (typography.md): display · h1 · h2 · title · body · small · caption */
  --fs-display: clamp(46px, 7.4vw, 88px);
  --t-h1: clamp(36px, 4.4vw, 56px);
  --t-h2: clamp(25px, 2.6vw, 31px);
  --t-title: 20px;
  --t-body: 17px;
  --t-small: 15px;
  --t-caption: 13px;

  /* ---- spacing scale (4pt base) ---- */
  --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: 128px;

  /* ---- layout ---- */
  --maxw: 1120px;
  --pad: 24px;
  --rail: 56px;            /* thread track width on desktop (layout, not a scroll value) */
  --radius: 16px;
  --radius-sm: 10px;
  --radius-pill: 999px;

  /* ---- motion ---- */
  --ease-out: cubic-bezier(.23, 1, .32, 1);   /* entrances + feedback */
  --ease-io: cubic-bezier(.77, 0, .175, 1);   /* on-screen movement */
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1D1D1F;
    --surface: #26262B;
    --surface-2: #202024;
    --text: #F5F5F4;
    --muted: #9A9AA0;
    --faint: #6E6E76;
    --line: #34343B;
    --line-strong: #40404A;
    --accent: #5AC8FA;         /* Sky — dark-theme accent */
    --accent-press: #7DD4FB;
    --accent-text: #5AC8FA;
    --on-accent: #10121A;
    --thread: #707078;         /* ~3.4:1 on ink */
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 34px -12px rgba(0, 0, 0, .5);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
  }
}

/* explicit user choice (theme toggle) wins over the OS preference, both ways */
:root[data-theme="light"] {
  --bg: #F5F5F4; --surface: #FFFFFF; --surface-2: #FAFAF9;
  --text: #1D1D1F; --muted: #6E6E73; --faint: #A1A1A6;
  --line: #E6E6E3; --line-strong: #D7D7D3;
  --accent: #0071E3; --accent-press: #005FBF; --accent-text: #0066CC; --on-accent: #FFFFFF;
  --thread: #8A8A8F;
  --shadow: 0 1px 2px rgba(29, 29, 31, .04), 0 10px 30px -12px rgba(29, 29, 31, .12);
  --shadow-sm: 0 1px 2px rgba(29, 29, 31, .05);
}
:root[data-theme="dark"] {
  --bg: #1D1D1F; --surface: #26262B; --surface-2: #202024;
  --text: #F5F5F4; --muted: #9A9AA0; --faint: #6E6E76;
  --line: #34343B; --line-strong: #40404A;
  --accent: #5AC8FA; --accent-press: #7DD4FB; --accent-text: #5AC8FA; --on-accent: #10121A;
  --thread: #707078;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 34px -12px rgba(0, 0, 0, .5);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
}