/* ─── Brand foundation ───────────*
 * ADA's brand color is a deep forest green. It is an ACCENT — the wordmark
 * mark, active nav underline, links, active states, small chrome details.
 * It is not a surface color. Both themes give the green room to breathe by
 * sitting it on a neutral foundation, then diverge completely in every
 * other dimension (type, spacing, composition, motion). */

/* ─── Modern theme — editorial dark, LAIN-adjacent ───────────*/
[data-theme="modern"] {
  /* ── Palette — warm near-black canvas, ivory text, forest as accent ── */
  --color-background:             #0f0f0e; /* warm near-black canvas */
  --color-surface:                #171716; /* raised panels */
  --color-surface-raised:         #1f1f1d; /* interactive/hover panels */
  --color-border:                 #2a2a27; /* quiet divider */
  --color-border-strong:          #6a6a63; /* emphasized border */
  --color-text:                   #f2eee6; /* warm ivory */
  --color-text-muted:             #a09c92; /* warm sand */
  --color-text-inverted:          #0f0f0e;

  /* Primary = link / active / brand accent (dark forest sage that lifts
     off the near-black canvas without dominating it) */
  --color-primary:                #a3c39a; /* light sage on dark — legible */
  --color-primary-hover:          #c0d6b8;
  --color-primary-foreground:     #0f0f0e;

  /* Accent = CTA moment. Warm bone/ivory so the CTA reads editorial
     rather than "green button on green background". */
  --color-accent:                 #e9e2d0; /* warm bone */
  --color-accent-hover:           #ffffff;
  --color-accent-foreground:      #0f0f0e;

  --color-secondary:              #1f1f1d;
  --color-secondary-foreground:   #f2eee6;

  --color-destructive:            #c47a70;
  --color-destructive-foreground: #f2eee6;

  --color-success:                #8fb894;
  --color-success-foreground:     #0f0f0e;

  --color-warning:                #d9b571;
  --color-warning-foreground:     #0f0f0e;

  /* Brand accent — the ADA forest green, used as decoration/hooks only */
  --color-brand:                  #2f5a3a;
  --color-brand-strong:           #427a4f;

  /* ── Atmosphere — a very subtle warm wash + fine grain. Kept
     deliberately low-key: the composition is the design, not the wash. ── */
  --bg-wash: radial-gradient(1400px 900px at 10% -10%, rgba(233, 226, 208, 0.035), transparent 55%),
             radial-gradient(1000px 700px at 100% 20%, rgba(163, 195, 154, 0.025), transparent 60%),
             linear-gradient(180deg, rgba(255, 255, 255, 0.012), transparent 45%);
  --bg-grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='7'/><feColorMatrix values='0 0 0 0 0.06  0 0 0 0 0.06  0 0 0 0 0.05  0 0 0 0.3 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/></svg>");

  /* ── Border radius — flat by default; shape comes from type and rules ── */
  --radius-none: 0;
  --radius-sm:   0;
  --radius-md:   0;
  --radius-lg:   0;
  --radius-full: 9999px;

  /* ── Typography — serif display / humanist sans / mono metadata ── */
  --font-serif-display: "Iowan Old Style", "Palatino", "Palatino Linotype", "Charter", "Georgia", serif;
  --font-sans:          "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:          ui-monospace, "SF Mono", "Cascadia Code", "IBM Plex Mono", monospace;

  --font-size-xs:   0.75rem;   /* 12 */
  --font-size-sm:   0.875rem;  /* 14 */
  --font-size-base: 1rem;      /* 16 */
  --font-size-lg:   1.25rem;   /* 20 */
  --font-size-xl:   1.5rem;    /* 24 */
  --font-size-2xl:  2rem;      /* 32 */
  --font-size-3xl:  2.75rem;   /* 44 */
  --font-size-4xl:  4.5rem;    /* 72 */
  --font-size-5xl:  8rem;      /* 128 — hero-scale display */

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold:   600;

  --line-height-tight:   0.95;
  --line-height-none:    1;
  --line-height-normal:  1.6;
  --line-height-relaxed: 1.75;

  --letter-spacing-tight: -0.045em;

  /* ── Shadows — restrained ── */
  --shadow-sm:    none;
  --shadow-md:    none;
  --shadow-lg:    0 32px 60px -30px rgb(0 0 0 / 0.65);
  --shadow-inset: none;

  /* ── Transitions — expo-out, unhurried ── */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 500ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow: 1000ms cubic-bezier(0.16, 1, 0.3, 1);

  /* ── Section rhythm — generous editorial whitespace ── */
  --space-section-sm: 4rem;
  --space-section-lg: 8rem;
}

/* ─── Classic theme — 90s system UI ───────────*
 * Windows-95-era window: neutral system-grey window face sitting on a dark
 * forest-green desktop. Dark green is the brand identity (desktop, title-bar
 * pinstripe, selected menu item, link color) but never a text background. */
[data-theme="classic"] {
  /* ── Palette ── */
  --color-background:             #d4d0c8; /* system window face — proper 95 grey */
  --color-surface:                #dedad2; /* raised panel face */
  --color-surface-raised:         #ebe7dd; /* hover / secondary panel */
  --color-border:                 #000000; /* dark inset edge */
  --color-border-strong:          #ffffff; /* highlight bevel */
  --color-text:                   #101010; /* near-black system ink */
  --color-text-muted:             #4a4a48;
  --color-text-inverted:          #ffffff;

  /* Primary = link + selected menu — the ADA forest green */
  --color-primary:                #1f4d2b;
  --color-primary-hover:          #133019;
  --color-primary-foreground:     #ffffff;

  /* Accent = system-window title-bar face (also for CTAs). Deep enough to
     read as "selected", legible white text on top. */
  --color-accent:                 #1f4d2b;
  --color-accent-hover:           #133019;
  --color-accent-foreground:      #ffffff;

  --color-secondary:              #d4d0c8;
  --color-secondary-foreground:   #101010;

  --color-destructive:            #8b1a10;
  --color-destructive-foreground: #ffffff;

  --color-success:                #1f4d2b;
  --color-success-foreground:     #ffffff;

  --color-warning:                #7a5010;
  --color-warning-foreground:     #ffffff;

  --color-brand:                  #1f4d2b;
  --color-brand-strong:           #2f6b3d;

  /* ── Desktop — dark forest with fine stipple; painted behind the window
     shell via body::before. The window face is what users read text on. ── */
  --desktop-color: #0d2416;
  --desktop-pattern:
    radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.06) 1px, transparent 0);
  --desktop-pattern-size: 4px 4px;

  /* ── Border radius — hard corners everywhere ── */
  --radius-none: 0;
  --radius-sm:   0;
  --radius-md:   0;
  --radius-lg:   0;
  --radius-full: 0;

  /* ── Typography — 90s system stack ── */
  --font-serif-display: "Charcoal", "Chicago", "Geneva", "Tahoma", sans-serif;
  --font-sans:          "Geneva", "Tahoma", "Verdana", "MS Sans Serif", system-ui, sans-serif;
  --font-mono:          "Monaco", "Consolas", "Courier New", monospace;

  --font-size-xs:   0.6875rem; /* 11 */
  --font-size-sm:   0.75rem;   /* 12 */
  --font-size-base: 0.8125rem; /* 13 */
  --font-size-lg:   0.9375rem; /* 15 */
  --font-size-xl:   1.0625rem; /* 17 */
  --font-size-2xl:  1.25rem;   /* 20 */
  --font-size-3xl:  1.5rem;    /* 24 */
  --font-size-4xl:  1.875rem;  /* 30 */
  --font-size-5xl:  2.25rem;   /* 36 */

  --font-weight-normal: 400;
  --font-weight-medium: 700;
  --font-weight-bold:   700;

  --line-height-tight:   1.15;
  --line-height-none:    1.1;
  --line-height-normal:  1.4;
  --line-height-relaxed: 1.55;

  --letter-spacing-tight: 0;

  /* ── Shadows — inset/outset bezels; light comes from top-left ── */
  --shadow-sm:    inset -1px -1px 0 #808080, inset 1px 1px 0 var(--color-border-strong),
                  inset -2px -2px 0 #000000, inset 2px 2px 0 #dfdfdf;
  --shadow-md:    inset -1px -1px 0 #808080, inset 1px 1px 0 var(--color-border-strong),
                  inset -2px -2px 0 #000000, inset 2px 2px 0 #dfdfdf;
  --shadow-lg:    inset -1px -1px 0 #808080, inset 1px 1px 0 var(--color-border-strong),
                  inset -2px -2px 0 #000000, inset 2px 2px 0 #dfdfdf;
  --shadow-inset: inset  1px  1px 0 #000000, inset -1px -1px 0 #dfdfdf,
                  inset  2px  2px 0 #808080, inset -2px -2px 0 var(--color-border-strong);

  /* ── Transitions — instant, OS-paced ── */
  --transition-fast: 60ms linear;
  --transition-base: 100ms linear;
  --transition-slow: 150ms linear;

  /* ── Section rhythm — dense information blocks ── */
  --space-section-sm: 1.25rem;
  --space-section-lg: 2rem;
}