/* =====================================================================
   tokens.css — the ONLY place for color, size, radius, shadow, font and
   motion values (Ground Rule 10, design system 12). Components use the
   semantic tokens only; raw brand/neutral scales are for this file.
   Theme: [data-theme="dark"] on <html>, or the OS setting when Auto.
   ===================================================================== */

:root {
  color-scheme: light;

  /* ---- Brand green (12 §2.1) ---- */
  --brand-50: #EEFBE8;
  --brand-100: #D6F5C9;
  --brand-200: #ADEA94;
  --brand-300: #7EDB5A;
  --brand-400: #4CC52A;
  --brand-500: #36A81B;
  --brand-600: #2A8A14;
  --brand-700: #226F11;
  --brand-800: #1C5710;
  --brand-900: #14400C;
  --brand-950: #0B2607;

  /* ---- Neutrals (12 §2.2) ---- */
  --bg: #FFFFFF;
  --bg-subtle: #F6F8F7;
  --surface: #FFFFFF;
  --surface-raised: #FFFFFF;
  --border: #E2E8E4;
  --border-strong: #C5D0C9;
  --text-strong: #0F1A14;
  --text: #2B3832;
  --text-muted: #4A5A51;
  --text-subtle: #6B7A72;

  /* ---- Semantic (12 §2.3) ---- */
  --primary: #226F11;
  --on-primary: #FFFFFF;
  --primary-hover: #1C5710;
  --primary-tint: #EEFBE8;
  --link: #226F11;
  --link-hover: #1C5710;
  --focus: #36A81B;
  --download: #226F11;
  --upload: #1D4ED8;
  --info: #1D4ED8;
  --success: #226F11;
  --warning: #B45309;
  --danger: #B91C1C;
  --info-tint: #EAF1FF;
  --success-tint: #EEFBE8;
  --warning-tint: #FFF7E6;
  --danger-tint: #FDECEC;
  --on-dark: #FFFFFF;          /* text on --grad-cta / dark brand surfaces */
  --on-dark-muted: #D6F5C9;
  --overlay: #0F1A1499;        /* modal / drawer backdrop */

  /* ---- Tier badges (12 §2.4) ---- */
  --badge-free-fg: #226F11;    --badge-free-bg: #EEFBE8;
  --badge-pro-fg: #6D28D9;     --badge-pro-bg: #F3EEFF;
  --badge-premium-fg: #B45309; --badge-premium-bg: #FFF7E6;
  --badge-paid-fg: #1D4ED8;    --badge-paid-bg: #EAF1FF;
  --badge-new-fg: #FFFFFF;     --badge-new-bg: #B91C1C;

  /* ---- Code blocks: same dark surface in both themes (12 §5) ---- */
  --code-bg: #0F1A14;
  --code-text: #E6EDE8;
  --code-muted: #9FB0A6;
  --code-inline-bg: #EEF2EF;

  /* ---- Gradients (brand only) ---- */
  --grad-hero: radial-gradient(circle at 50% 40%, #4CC52A22, transparent 60%);
  --grad-cta: linear-gradient(135deg, #1C5710, #0B2607);

  /* ---- Typography (12 §3) ---- */
  --font-sans: "Inter Variable", "Inter Fallback", "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Code", Consolas, monospace;
  --fs-display: clamp(2.25rem, 1.68rem + 2.42vw, 3.5rem);
  --fs-h1: clamp(1.875rem, 1.59rem + 1.21vw, 2.5rem);
  --fs-h2: clamp(1.5rem, 1.33rem + 0.73vw, 1.875rem);
  --fs-h3: clamp(1.1875rem, 1.1rem + 0.36vw, 1.375rem);
  --fs-h4: clamp(1.0625rem, 1.03rem + 0.12vw, 1.125rem);
  --fs-lead: clamp(1.125rem, 1.07rem + 0.24vw, 1.25rem);
  --fs-body: 1rem;
  --fs-prose: clamp(1.0625rem, 1.03rem + 0.12vw, 1.125rem);
  --fs-sm: 0.875rem;
  --fs-xs: 0.75rem;
  --fs-code: 0.875rem;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-heavy: 800;
  --lh-tight: 1.1;
  --lh-h1: 1.15;
  --lh-heading: 1.25;
  --lh-h3: 1.3;
  --lh-snug: 1.4;
  --lh-body: 1.65;
  --lh-prose: 1.75;
  --lh-lead: 1.6;
  --lh-sm: 1.5;
  --ls-tight: -0.02em;
  --ls-heading: -0.015em;
  --ls-caps: 0.06em;

  /* ---- Spacing (4 px base) ---- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --section-y: clamp(3rem, 1.64rem + 5.82vw, 6rem);

  /* ---- Layout ---- */
  --w-max: 1200px;
  --w-prose: 720px;
  --w-sidebar: 300px;
  --gutter: 1rem;
  --header-h: 56px;
  --announcement-h: 40px;
  --brand-mark: 32px;
  --drawer-w: 360px;

  /* ---- Sizes ---- */
  --control-h-sm: 36px;
  --control-h: 44px;
  --control-h-lg: 52px;
  --touch-min: 44px;
  --icon-sm: 16px;
  --icon-md: 20px;
  --icon-lg: 24px;
  --app-icon: 64px;
  --app-icon-lg: 96px;
  --step-dot: 32px;
  --page-btn: 40px;
  --border-w: 1px;
  --accent-w: 4px;
  --focus-w: 2px;
  --focus-offset: 2px;
  --lift: -2px;

  /* ---- Radius ---- */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-pill: 999px;

  /* ---- Shadows ---- */
  --sh-1: 0 1px 2px #0F1A140F;
  --sh-2: 0 4px 12px #0F1A1414;
  --sh-3: 0 12px 32px #0F1A141F;

  /* ---- Z-index ---- */
  --z-header: 100;
  --z-dropdown: 200;
  --z-sticky: 300;
  --z-drawer: 400;
  --z-overlay: 500;
  --z-toast: 600;

  /* ---- Motion ---- */
  --dur-fast: 120ms;
  --dur: 200ms;
  --ease: cubic-bezier(.2, .8, .2, 1);
}

@media (min-width: 768px) {
  :root { --gutter: 1.5rem; --header-h: 64px; }
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur: 0ms; --lift: 0px; }
}

/* ---- Dark theme: explicit choice ---- */
[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0E1411; --bg-subtle: #131A16; --surface: #18211C; --surface-raised: #1F2A24;
  --border: #2A362F; --border-strong: #3A4840;
  --text-strong: #F1F5F2; --text: #D7E0DA; --text-muted: #A3B3AA; --text-subtle: #7F8F86;
  --primary: #4CC52A; --on-primary: #0E1411; --primary-hover: #6FD94A; --primary-tint: #16301A;
  --link: #6FD94A; --link-hover: #8FE36B; --focus: #6FD94A;
  --download: #6FD94A; --upload: #60A5FA;
  --info: #60A5FA; --success: #6FD94A; --warning: #FBBF24; --danger: #F87171;
  --info-tint: #14223D; --success-tint: #16301A; --warning-tint: #33260C; --danger-tint: #3A1515;
  --badge-free-fg: #6FD94A; --badge-free-bg: #16301A;
  --badge-pro-fg: #A78BFA; --badge-pro-bg: #251B3D;
  --badge-premium-fg: #FBBF24; --badge-premium-bg: #33260C;
  --badge-paid-fg: #60A5FA; --badge-paid-bg: #14223D;
  --badge-new-fg: #0E1411; --badge-new-bg: #F87171;
  --code-inline-bg: #1F2A24;
  --overlay: #000000B3;
  --sh-1: none; --sh-2: none;
}

/* ---- Dark theme: Auto (no explicit choice) follows the OS ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0E1411; --bg-subtle: #131A16; --surface: #18211C; --surface-raised: #1F2A24;
    --border: #2A362F; --border-strong: #3A4840;
    --text-strong: #F1F5F2; --text: #D7E0DA; --text-muted: #A3B3AA; --text-subtle: #7F8F86;
    --primary: #4CC52A; --on-primary: #0E1411; --primary-hover: #6FD94A; --primary-tint: #16301A;
    --link: #6FD94A; --link-hover: #8FE36B; --focus: #6FD94A;
    --download: #6FD94A; --upload: #60A5FA;
    --info: #60A5FA; --success: #6FD94A; --warning: #FBBF24; --danger: #F87171;
    --info-tint: #14223D; --success-tint: #16301A; --warning-tint: #33260C; --danger-tint: #3A1515;
    --badge-free-fg: #6FD94A; --badge-free-bg: #16301A;
    --badge-pro-fg: #A78BFA; --badge-pro-bg: #251B3D;
    --badge-premium-fg: #FBBF24; --badge-premium-bg: #33260C;
    --badge-paid-fg: #60A5FA; --badge-paid-bg: #14223D;
    --badge-new-fg: #0E1411; --badge-new-bg: #F87171;
    --code-inline-bg: #1F2A24;
    --overlay: #000000B3;
    --sh-1: none; --sh-2: none;
  }
}