/* =====================================================================
   PanelSpring — design tokens
   Layout concept: "the committee table". Calm, paper-like surfaces with
   a faint green bias; deep evergreen for anything you can act on; a lime
   highlighter reserved for the one thing that matters on each screen.

   Every color is defined here first (light), then redefined for dark mode
   twice: once for the OS preference, once for an explicit data-theme toggle.
   Components must only reference these tokens — never literal colors.
   ===================================================================== */

:root {
  color-scheme: light;

  /* ---- Neutrals (green-biased) ---- */
  --bg: #F4F7F2;            /* page ground */
  --bg-alt: #E9EFE6;        /* alternate section band */
  --surface: #FFFFFF;       /* cards, panels, inputs */
  --surface-2: #F1F5EF;     /* subtle fill, table headers, hovers */
  --surface-3: #E3EBE1;     /* tracks, neutral badges */
  --ink: #10221A;           /* primary text */
  --ink-2: #435750;         /* secondary text */
  --ink-3: #5B6E66;         /* muted labels (passes 4.5:1 on bg + surface) */
  --line: #D8E0D8;          /* hairlines */
  --line-strong: #B5C3B9;   /* input borders, dividers that must be seen */

  /* ---- Brand ---- */
  --brand: #0D5C43;         /* Evergreen — primary actions */
  --brand-hover: #094633;
  --brand-ink: #FFFFFF;     /* text on --brand */
  --brand-text: #0D5C43;    /* links and brand-colored text */
  --brand-soft: #DDEFE5;    /* tinted fills: active nav, selected rows */
  --brand-soft-ink: #0A4834;
  --leaf: #3FA35B;          /* logo leaf, small decorative accents */
  --hl: #D6F07A;            /* Highlighter lime — the signature accent */
  --hl-ink: #10221A;        /* text sitting on the highlighter */
  --hl-size: 0.42em;        /* highlighter stroke height (light: marker underline) */
  --hl-pos: 0 88%;
  --band: #0B4F3A;          /* deep feature bands, CTA blocks */
  --band-ink: #F2F7F3;
  --band-ink-2: #BFD6CB;
  --band-line: #1F6B53;

  /* ---- Award / ribbon accent ---- */
  --gold: #F2B13B;
  --gold-soft: #FCEFD3;
  --gold-ink: #6B4500;

  /* ---- Semantic ---- */
  --ok: #1D7447;       --ok-soft: #DDF2E5;
  --warn: #8F5A00;     --warn-soft: #FDF0D5;
  --danger: #B42318;   --danger-soft: #FDE6E3;   --danger-ink: #FFFFFF;
  --info: #1E5AA0;     --info-soft: #E2EDFA;
  --focus: #1E5AA0;
  --focus-ring: rgba(30, 90, 160, 0.28);

  /* ---- Demo organization theme (Alder Creek Education Fund) ----
     Applicant/judge portals re-map --brand to these so each organization's
     colors drive every component. A dark variant is generated per org. */
  --org: #1D3F6E;
  --org-hover: #16325A;
  --org-ink: #FFFFFF;
  --org-text: #1D3F6E;
  --org-soft: #E3EAF5;
  --org-soft-ink: #17345C;

  /* ---- Elevation ---- */
  --shadow-sm: 0 1px 2px rgba(16, 34, 26, 0.07);
  --shadow-md: 0 1px 3px rgba(16, 34, 26, 0.06), 0 8px 24px rgba(16, 34, 26, 0.08);
  --shadow-lg: 0 2px 6px rgba(16, 34, 26, 0.06), 0 24px 56px rgba(16, 34, 26, 0.14);
  --overlay: rgba(10, 24, 18, 0.5);

  /* ---- Type ---- */
  --font-display: "Bricolage Grotesque", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --font-body: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "Atkinson Hyperlegible Mono", ui-monospace, "Cascadia Mono", "SFMono-Regular", Consolas, monospace;

  --fs-2xs: 0.6875rem;   /* 11 */
  --fs-xs: 0.75rem;      /* 12 */
  --fs-sm: 0.875rem;     /* 14 */
  --fs-md: 1rem;         /* 16 */
  --fs-lg: 1.125rem;     /* 18 */
  --fs-xl: 1.3125rem;    /* 21 */
  --fs-2xl: 1.625rem;    /* 26 */
  --fs-3xl: clamp(1.875rem, 1.45rem + 1.5vw, 2.5rem);
  --fs-4xl: clamp(2.25rem, 1.6rem + 2.6vw, 3.375rem);
  --fs-hero: clamp(2.625rem, 1.5rem + 4.6vw, 4.75rem);

  --lh-tight: 1.04;
  --lh-snug: 1.22;
  --lh-body: 1.6;

  /* ---- Space (4px base) ---- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
  --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px;
  --sp-20: 80px; --sp-24: 96px;

  /* ---- Radius (assigned by role, not uniformly) ---- */
  --r-xs: 4px;     /* chips, score cells, kbd */
  --r-sm: 7px;     /* buttons, inputs */
  --r-md: 11px;    /* cards, panels, tables */
  --r-lg: 18px;    /* product mocks, plan cards, CTA bands */
  --r-pill: 999px; /* badges, pills */

  /* ---- Layout ---- */
  --container: 1200px;
  --container-narrow: 760px;
  --gutter: 16px;
  --header-h: 68px;
  --sidebar-w: 264px;
  --topbar-h: 60px;
}

@media (min-width: 640px)  { :root { --gutter: 24px; } }
@media (min-width: 1024px) { :root { --gutter: 32px; } }

/* ---------- Dark (OS preference, unless the user forced light) ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0C1512;
    --bg-alt: #101C17;
    --surface: #14201B;
    --surface-2: #1A2822;
    --surface-3: #23332C;
    --ink: #E3EDE7;
    --ink-2: #A9BBB1;
    --ink-3: #8FA399;
    --line: #26362F;
    --line-strong: #3B4E45;
    --brand: #6CD3A3;
    --brand-hover: #8DE0B9;
    --brand-ink: #05211A;
    --brand-text: #7EDAAE;
    --brand-soft: #143A2C;
    --brand-soft-ink: #A6EBC8;
    --leaf: #63C47C;
    --hl: #CDEB62;
    --hl-ink: #0C1512;
    --hl-size: 1.08em;
    --hl-pos: 0 62%;
    --band: #11392B;
    --band-ink: #E8F1EC;
    --band-ink-2: #A9C7B8;
    --band-line: #24523F;
    --gold: #F0B44A;
    --gold-soft: #3A2D12;
    --gold-ink: #F6CF83;
    --ok: #66CF93;     --ok-soft: #12321F;
    --warn: #F0B44A;   --warn-soft: #362812;
    --danger: #FF8B7E; --danger-soft: #3B1714; --danger-ink: #2A0B08;
    --info: #8DB8F2;   --info-soft: #14243A;
    --focus: #8DB8F2;
    --focus-ring: rgba(141, 184, 242, 0.32);
    --org: #9CBBEB;
    --org-hover: #B6CEF2;
    --org-ink: #0B1626;
    --org-text: #A8C4EF;
    --org-soft: #172741;
    --org-soft-ink: #C4D6F4;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 1px 3px rgba(0, 0, 0, 0.35), 0 8px 24px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 2px 6px rgba(0, 0, 0, 0.4), 0 24px 56px rgba(0, 0, 0, 0.5);
    --overlay: rgba(0, 0, 0, 0.62);
  }
}

/* ---------- Dark (explicit toggle) — same values as above ---------- */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0C1512;
  --bg-alt: #101C17;
  --surface: #14201B;
  --surface-2: #1A2822;
  --surface-3: #23332C;
  --ink: #E3EDE7;
  --ink-2: #A9BBB1;
  --ink-3: #8FA399;
  --line: #26362F;
  --line-strong: #3B4E45;
  --brand: #6CD3A3;
  --brand-hover: #8DE0B9;
  --brand-ink: #05211A;
  --brand-text: #7EDAAE;
  --brand-soft: #143A2C;
  --brand-soft-ink: #A6EBC8;
  --leaf: #63C47C;
  --hl: #CDEB62;
  --hl-ink: #0C1512;
  --hl-size: 1.08em;
  --hl-pos: 0 62%;
  --band: #11392B;
  --band-ink: #E8F1EC;
  --band-ink-2: #A9C7B8;
  --band-line: #24523F;
  --gold: #F0B44A;
  --gold-soft: #3A2D12;
  --gold-ink: #F6CF83;
  --ok: #66CF93;     --ok-soft: #12321F;
  --warn: #F0B44A;   --warn-soft: #362812;
  --danger: #FF8B7E; --danger-soft: #3B1714; --danger-ink: #2A0B08;
  --info: #8DB8F2;   --info-soft: #14243A;
  --focus: #8DB8F2;
  --focus-ring: rgba(141, 184, 242, 0.32);
  --org: #9CBBEB;
  --org-hover: #B6CEF2;
  --org-ink: #0B1626;
  --org-text: #A8C4EF;
  --org-soft: #172741;
  --org-soft-ink: #C4D6F4;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 1px 3px rgba(0, 0, 0, 0.35), 0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 2px 6px rgba(0, 0, 0, 0.4), 0 24px 56px rgba(0, 0, 0, 0.5);
  --overlay: rgba(0, 0, 0, 0.62);
}