/* ─── 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 — black and white editorial ───────────*
 * The palette and type of the approved Modern homepage, shared by every
 * Modern page. Pure black and white with three greys; status colours stay
 * monochrome, so state is always carried by words as well. */
[data-theme="modern"] {
  /* ── Palette ── */
  --color-background:             #000000;
  --color-surface:                #181818; /* raised panels */
  --color-surface-raised:         #181818; /* interactive/hover panels */
  --color-border:                 #181818; /* quiet divider */
  --color-border-strong:          #777777; /* rules and control edges (4.7:1 on black) */
  --color-text:                   #ffffff;
  --color-text-muted:             #cccccc;
  --color-text-inverted:          #000000;

  --color-primary:                #ffffff;
  --color-primary-hover:          #cccccc;
  --color-primary-foreground:     #000000;

  --color-accent:                 #ffffff;
  --color-accent-hover:           #cccccc;
  --color-accent-foreground:      #000000;

  --color-secondary:              #000000;
  --color-secondary-foreground:   #ffffff;

  --color-destructive:            #ffffff;
  --color-destructive-foreground: #000000;

  --color-success:                #ffffff;
  --color-success-foreground:     #000000;

  --color-warning:                #cccccc;
  --color-warning-foreground:     #000000;

  --color-brand:                  #ffffff;
  --color-brand-strong:           #ffffff;

  /* ── 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 — self-hosted faces, declared in home_modern.css ──
     display: Basteleur for oversized headlines; editorial: Sporting
     Grotesque for uppercase titles; sans for reading; mono for metadata. */
  --font-display:       "Basteleur", "Sporting Grotesque", serif;
  --font-editorial:     "Sporting Grotesque", "Instrument Sans", sans-serif;
  --font-serif-display: var(--font-editorial);
  --font-sans:          "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
  --font-mono:          "IBM Plex Mono", ui-monospace, 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);
  --ease-editorial:  cubic-bezier(0.16, 1, 0.3, 1);

  /* ── Page gutter — the homepage composition's side margin ── */
  --gutter: clamp(1rem, 4vw, 3.5rem);

  /* ── 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;
}