/* trueset design tokens, from design-trueset.png and docs/design/design-system.md.
 * Components consume the semantic names below, never a raw hex. */

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

:root {
  color-scheme: light;

  /* Palette */
  --brand-900: #0f1e12;
  --brand-800: #083826;
  --brand-700: #0a5b28;
  --brand-600: #147a3f;
  --brand-500: #16a34a;
  --brand-400: #4ade80;
  --brand-100: #dcefe3;
  --brand-50: #eef7f1;

  --gray-950: #030712;
  --gray-900: #111827;
  --gray-800: #1f2937;
  --gray-700: #374151;
  --gray-600: #4b5563;
  --gray-500: #6b7280;
  --gray-400: #9ca3af;
  --gray-300: #d1d5db;
  --gray-200: #e5e7eb;
  --gray-100: #f3f4f6;
  --gray-50: #f9fafb;

  /* Surfaces */
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-tint: #f6f8f7;
  --surface-sunk: #f1f4f2;
  --border: var(--gray-200);
  --border-strong: var(--gray-300);
  --divider: #edf0ee;

  /* Text */
  --text: var(--gray-900);
  --text-2: var(--gray-700);
  --text-3: var(--gray-500);
  --text-4: var(--gray-400);

  /* Accent */
  --accent: var(--brand-600);
  --accent-hover: var(--brand-700);
  --accent-press: var(--brand-800);
  --accent-text: var(--brand-600);
  --accent-wash: var(--brand-50);
  --accent-line: var(--brand-100);
  --on-accent: #ffffff;
  --focus: rgb(22 163 74 / 35%);

  /* Semantic */
  --success: #16a34a;
  --success-wash: #eaf5ee;
  --success-text: #0f6b33;
  --warning: #f59e0b;
  --warning-wash: #fef3c7;
  --warning-text: #92400e;
  --danger: #ef4444;
  --danger-wash: #fee2e2;
  --danger-text: #b91c1c;
  --neutral-wash: var(--gray-100);
  --neutral-text: var(--gray-600);

  /* The dark green card ("Try it now") and code panels stay dark in both themes. */
  --ink: #0b1a14;
  --ink-2: #102219;
  --ink-border: #1d3328;
  --ink-text: #e6efe9;
  --ink-muted: #8fa699;
  --code-bg: #0d1512;
  --code-bar: #111c17;
  --code-border: #1d2b24;
  --code-text: #d1ddd6;
  --code-muted: #8a9a91;
  --code-ok: #4ade80;
  --code-error: #f87171;
  --code-pending: #fbbf24;

  /* Map, one shade per geopolitical zone */
  --map-1: #0a5b28;
  --map-2: #147a3f;
  --map-3: #1e8f4c;
  --map-4: #3aa565;
  --map-5: #6cbf8b;
  --map-6: #9fd6b2;
  --map-stroke: #ffffff;

  /* Type */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, "JetBrains Mono", Menlo, Consolas, monospace;

  --fs-display: 48px; --lh-display: 56px;
  --fs-h1: 32px;      --lh-h1: 40px;
  --fs-h2: 24px;      --lh-h2: 32px;
  --fs-h3: 20px;      --lh-h3: 28px;
  --fs-body: 16px;    --lh-body: 24px;
  --fs-small: 14px;   --lh-small: 20px;
  --fs-caption: 12px; --lh-caption: 16px;

  --w-regular: 400;
  --w-medium: 500;
  --w-semibold: 600;
  --w-bold: 700;

  /* Space: 2 4 8 16 24, extended on the same rhythm */
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 8px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  --radius-sm: 6px;
  --radius: 8px;
  --radius-card: 12px;
  --radius-pill: 999px;

  --content-max: 1200px;
  --gutter: 24px;
  --measure: 64ch;
  --header-h: 64px;

  --shadow-sm: 0 1px 2px rgb(16 24 20 / 6%);
  --shadow-card: 0 1px 2px rgb(16 24 20 / 5%), 0 4px 16px -8px rgb(16 24 20 / 12%);
  --shadow-float: 0 2px 4px rgb(16 24 20 / 6%), 0 16px 40px -16px rgb(16 24 20 / 24%);

  --t-fast: 120ms;
  --t-base: 200ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);
}

/* Dark theme. Applied from the system setting unless the reader picked light,
 * and always when they picked dark. The two blocks must stay identical. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0a110e;
    --surface: #0f1814;
    --surface-tint: #0d1512;
    --surface-sunk: #0c1411;
    --border: #1f2d26;
    --border-strong: #2a3b32;
    --divider: #18241e;
    --text: #e8eeea;
    --text-2: #b8c4bd;
    --text-3: #8b9991;
    --text-4: #5f6e66;
    --accent: #16a34a;
    --accent-hover: #1fb556;
    --accent-press: #147a3f;
    --accent-text: #4ade80;
    --accent-wash: #10241a;
    --accent-line: #1a3a28;
    --on-accent: #ffffff;
    --focus: rgb(74 222 128 / 35%);
    --success: #22c55e;
    --success-wash: #10271b;
    --success-text: #6ee7a0;
    --warning-wash: #2b2108;
    --warning-text: #fcd34d;
    --danger-wash: #2c1214;
    --danger-text: #fca5a5;
    --neutral-wash: #18221d;
    --neutral-text: #a3b0a8;
    --ink: #0f1d16;
    --ink-2: #13251b;
    --ink-border: #21382b;
    --code-bg: #0b120f;
    --code-bar: #0f1813;
    --code-border: #1c2a23;
    --map-1: #1a7a3e;
    --map-2: #1f8f49;
    --map-3: #27a356;
    --map-4: #3cb86a;
    --map-5: #5fcb87;
    --map-6: #86dca6;
    --map-stroke: #0a110e;
    --shadow-sm: 0 1px 2px rgb(0 0 0 / 30%);
    --shadow-card: 0 1px 2px rgb(0 0 0 / 30%), 0 4px 16px -8px rgb(0 0 0 / 50%);
    --shadow-float: 0 2px 4px rgb(0 0 0 / 30%), 0 16px 40px -16px rgb(0 0 0 / 70%);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0a110e;
  --surface: #0f1814;
  --surface-tint: #0d1512;
  --surface-sunk: #0c1411;
  --border: #1f2d26;
  --border-strong: #2a3b32;
  --divider: #18241e;
  --text: #e8eeea;
  --text-2: #b8c4bd;
  --text-3: #8b9991;
  --text-4: #5f6e66;
  --accent: #16a34a;
  --accent-hover: #1fb556;
  --accent-press: #147a3f;
  --accent-text: #4ade80;
  --accent-wash: #10241a;
  --accent-line: #1a3a28;
  --on-accent: #ffffff;
  --focus: rgb(74 222 128 / 35%);
  --success: #22c55e;
  --success-wash: #10271b;
  --success-text: #6ee7a0;
  --warning-wash: #2b2108;
  --warning-text: #fcd34d;
  --danger-wash: #2c1214;
  --danger-text: #fca5a5;
  --neutral-wash: #18221d;
  --neutral-text: #a3b0a8;
  --ink: #0f1d16;
  --ink-2: #13251b;
  --ink-border: #21382b;
  --code-bg: #0b120f;
  --code-bar: #0f1813;
  --code-border: #1c2a23;
  --map-1: #1a7a3e;
  --map-2: #1f8f49;
  --map-3: #27a356;
  --map-4: #3cb86a;
  --map-5: #5fcb87;
  --map-6: #86dca6;
  --map-stroke: #0a110e;
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 30%);
  --shadow-card: 0 1px 2px rgb(0 0 0 / 30%), 0 4px 16px -8px rgb(0 0 0 / 50%);
  --shadow-float: 0 2px 4px rgb(0 0 0 / 30%), 0 16px 40px -16px rgb(0 0 0 / 70%);
}

@media (max-width: 720px) {
  :root {
    --gutter: 16px;
    --fs-display: 34px; --lh-display: 40px;
    --fs-h1: 28px;      --lh-h1: 36px;
    --fs-h2: 22px;      --lh-h2: 30px;
  }
}

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