/* ============================================================
   tokens.css — Sytezo skin for the Startup Funding Guide
   Brand: black #000000 / white #ffffff · Geist throughout, the same
   family sytezo.com uses · SYTΞZO wordmark (SVG).
   Layout concept: a black hero carrying the funding signal (one
   bar per scheme, coloured by status) over a quiet monochrome
   docs shell; below the hero, lists and tracks rather than cards.
   Dark-first: bare :root holds the dark palette, light is applied
   by the OS preference or an explicit data-theme="light".
   Category and stage hues are greyscale on purpose; the only
   colour on the page is semantic status (open / waiting / closed).
   ============================================================ */

/* ---- self-hosted font (SIL OFL) ----
   Geist variable, the same family sytezo.com uses. One file carries the
   whole weight axis and already covers U+20B9 (rupee) plus the arrows and
   dashes used throughout the guide, so there is no latin-ext split here. */
@font-face {
  font-family: "Geist";
  src: url("fonts/Geist-Variable.woff2") format("woff2-variations"),
       url("fonts/Geist-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ============ shared tokens + DARK palette (the default) ============ */
:root {
  color-scheme: dark;

  /* ---- typography ---- */
  --font-display: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  /* ---- type scale ----
     The guide used to carry 46 different rem sizes, the smallest 8.96px.
     Everything now snaps to these ten steps, so type reads as one system.
     13px is the floor: nothing on the page is set smaller than that. */
  --fs-2xs: 0.8125rem;   /* 13px — captions, table meta, badges */
  --fs-xs:  0.875rem;    /* 14px — labels, secondary UI */
  --fs-sm:  0.9375rem;   /* 15px — dense list rows */
  --fs-base: 1rem;       /* 16px — body copy */
  --fs-md:  1.0625rem;   /* 17px — ledes */
  --fs-lg:  1.1875rem;   /* 19px — h4 */
  --fs-xl:  1.375rem;    /* 22px — h3 */
  --fs-2xl: 1.625rem;    /* 26px — h2 */
  --fs-3xl: 2rem;        /* 32px — h1 */
  --fs-4xl: 2.5rem;      /* 40px — display */

  --lh-tight: 1.2;
  --lh-snug: 1.4;
  --lh-normal: 1.65;     /* body */
  --lh-loose: 1.75;      /* long-form prose */

  /* ---- shape ---- */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-pill: 999px;

  /* ---- motion ---- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --speed: 180ms;

  /* ---- the hero is black in both themes, so its colours never change ---- */
  --hero-bg: #000000;
  --hero-text: #f6f6f5;
  --hero-muted: #a1a1a6;
  --hero-line: rgb(255 255 255 / 0.14);
  --hero-ok: #6ee7a8;
  --hero-wait: #f5c56b;
  --hero-stop: #ff9a8f;
  --hero-active: rgb(255 255 255 / 0.5);

  /* ---- legacy anchors the engine still references (mapped to mono) ---- */
  --brand-navy: var(--text);
  --brand-saffron: var(--text-muted);
  --brand-green: var(--text-faint);
  --brand-blue: var(--text);

  --bg: #08080a;
  --surface: #101014;
  --surface-alt: #0c0c10;
  --surface-sunken: #08080a;
  --border: rgb(255 255 255 / 0.10);
  --border-strong: rgb(255 255 255 / 0.22);

  --text: #f6f6f5;
  --text-muted: #a3a3a8;
  --text-faint: #8b8b91;

  --primary: #ffffff;
  --primary-contrast: #000000;
  --accent: #ffffff;
  --accent-strong: #ffffff;
  --accent-contrast: #000000;
  --accent-tint: rgb(255 255 255 / 0.08);
  --link: #f6f6f5;
  --link-hover: #ffffff;

  /* semantic status — the only colour on the page */
  --ok: #6ee7a8;      --ok-tint: rgb(110 231 168 / 0.12);
  --wait: #f5c56b;    --wait-tint: rgb(245 197 107 / 0.12);
  --stop: #ff9a8f;    --stop-tint: rgb(255 154 143 / 0.12);
  --success: var(--ok); --success-tint: var(--ok-tint);
  --warning: var(--wait); --warning-tint: var(--wait-tint);
  --danger: var(--stop);

  --sidebar-bg: #0a0a0d;
  --topbar-bg: rgb(0 0 0 / 0.72);
  --code-bg: #0c0c10;
  --kbd-bg: #0c0c10;
  --scrim: rgb(0 0 0 / 0.72);
  --glass: rgb(16 16 20 / 0.72);
  --glass-border: rgb(255 255 255 / 0.12);

  --shadow-1: 0 1px 2px rgb(0 0 0 / 0.6);
  --shadow-2: 0 8px 20px -8px rgb(0 0 0 / 0.8);
  --shadow-3: 0 30px 60px -20px rgb(0 0 0 / 0.9);

  /* categories & stages: greyscale steps, told apart by label + glyph */
  --cat-grant: #f6f6f5;       --cat-grant-tint: rgb(255 255 255 / 0.08);
  --cat-equity: #f6f6f5;      --cat-equity-tint: rgb(255 255 255 / 0.08);
  --cat-loan: #f6f6f5;        --cat-loan-tint: rgb(255 255 255 / 0.08);
  --cat-incubation: #f6f6f5;  --cat-incubation-tint: rgb(255 255 255 / 0.08);
  --cat-market: #f6f6f5;      --cat-market-tint: rgb(255 255 255 / 0.08);
  --cat-mixed: #f6f6f5;       --cat-mixed-tint: rgb(255 255 255 / 0.08);
  --cat-other: #b4b4b9;       --cat-other-tint: rgb(255 255 255 / 0.05);
  --stage-ideation: #3a3a3d;
  --stage-prototype: #5a5a5e;
  --stage-early: #85858a;
  --stage-growth: #b4b4b9;
  --stage-market: #f6f6f5;
  --org-academic: #f6f6f5; --org-tbi: #d0d0d4; --org-aic: #b4b4b9;
  --org-government: #96969b; --org-sector: #78787d; --org-private: #5a5a5e;
}

/* ============ LIGHT: from the OS preference, unless the visitor chose dark ============ */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --bg: #ffffff;
    --surface: #ffffff;
    --surface-alt: #f5f5f4;
    --surface-sunken: #efefed;
    --border: #e6e6e3;
    --border-strong: #cfcfcb;
    --text: #0a0a0a;
    --text-muted: #45454a;
    --text-faint: #66666c;
    --primary: #000000;
    --primary-contrast: #ffffff;
    --accent: #000000;
    --accent-strong: #000000;
    --accent-contrast: #ffffff;
    --accent-tint: #f0f0ee;
    --link: #0a0a0a;
    --link-hover: #000000;
    --ok: #0d7a46;      --ok-tint: #e5f5ec;
    --wait: #8a5800;    --wait-tint: #fbf1dc;
    --stop: #b42318;    --stop-tint: #fde8e6;
    --sidebar-bg: #fafaf9;
    --topbar-bg: rgb(255 255 255 / 0.86);
    --code-bg: #f3f3f1;
    --kbd-bg: #ffffff;
    --scrim: rgb(0 0 0 / 0.5);
    --glass: rgb(255 255 255 / 0.72);
    --glass-border: rgb(0 0 0 / 0.08);
    --shadow-1: 0 1px 2px rgb(0 0 0 / 0.05), 0 1px 3px rgb(0 0 0 / 0.07);
    --shadow-2: 0 6px 16px -6px rgb(0 0 0 / 0.14), 0 2px 4px -2px rgb(0 0 0 / 0.06);
    --shadow-3: 0 24px 48px -16px rgb(0 0 0 / 0.28);
    --cat-grant: #0a0a0a;       --cat-grant-tint: #f0f0ee;
    --cat-equity: #0a0a0a;      --cat-equity-tint: #f0f0ee;
    --cat-loan: #0a0a0a;        --cat-loan-tint: #f0f0ee;
    --cat-incubation: #0a0a0a;  --cat-incubation-tint: #f0f0ee;
    --cat-market: #0a0a0a;      --cat-market-tint: #f0f0ee;
    --cat-mixed: #0a0a0a;       --cat-mixed-tint: #f0f0ee;
    --cat-other: #45454a;       --cat-other-tint: #f5f5f4;
    --stage-ideation: #d4d4d0;
    --stage-prototype: #a8a8a4;
    --stage-early: #76766f;
    --stage-growth: #45454a;
    --stage-market: #000000;
    --org-academic: #0a0a0a; --org-tbi: #2f2f2d; --org-aic: #45454a;
    --org-government: #5f5f5c; --org-sector: #8c8c88; --org-private: #b4b4b0;
  }
}

/* ============ LIGHT: explicit choice (same values) ============ */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-alt: #f5f5f4;
  --surface-sunken: #efefed;
  --border: #e6e6e3;
  --border-strong: #cfcfcb;
  --text: #0a0a0a;
  --text-muted: #45454a;
  --text-faint: #66666c;
  --primary: #000000;
  --primary-contrast: #ffffff;
  --accent: #000000;
  --accent-strong: #000000;
  --accent-contrast: #ffffff;
  --accent-tint: #f0f0ee;
  --link: #0a0a0a;
  --link-hover: #000000;
  --ok: #0d7a46;      --ok-tint: #e5f5ec;
  --wait: #8a5800;    --wait-tint: #fbf1dc;
  --stop: #b42318;    --stop-tint: #fde8e6;
  --sidebar-bg: #fafaf9;
  --topbar-bg: rgb(255 255 255 / 0.86);
  --code-bg: #f3f3f1;
  --kbd-bg: #ffffff;
  --scrim: rgb(0 0 0 / 0.5);
  --glass: rgb(255 255 255 / 0.72);
  --glass-border: rgb(0 0 0 / 0.08);
  --shadow-1: 0 1px 2px rgb(0 0 0 / 0.05), 0 1px 3px rgb(0 0 0 / 0.07);
  --shadow-2: 0 6px 16px -6px rgb(0 0 0 / 0.14), 0 2px 4px -2px rgb(0 0 0 / 0.06);
  --shadow-3: 0 24px 48px -16px rgb(0 0 0 / 0.28);
  --cat-grant: #0a0a0a;       --cat-grant-tint: #f0f0ee;
  --cat-equity: #0a0a0a;      --cat-equity-tint: #f0f0ee;
  --cat-loan: #0a0a0a;        --cat-loan-tint: #f0f0ee;
  --cat-incubation: #0a0a0a;  --cat-incubation-tint: #f0f0ee;
  --cat-market: #0a0a0a;      --cat-market-tint: #f0f0ee;
  --cat-mixed: #0a0a0a;       --cat-mixed-tint: #f0f0ee;
  --cat-other: #45454a;       --cat-other-tint: #f5f5f4;
  --stage-ideation: #d4d4d0;
  --stage-prototype: #a8a8a4;
  --stage-early: #76766f;
  --stage-growth: #45454a;
  --stage-market: #000000;
  --org-academic: #0a0a0a; --org-tbi: #2f2f2d; --org-aic: #45454a;
  --org-government: #5f5f5c; --org-sector: #8c8c88; --org-private: #b4b4b0;
}