:root {
  /* ============================================
     RUNDONE DESIGN TOKENS
     Single source of truth — Stepanov's principle:
     "Separate algorithms from data structures"
     Change values HERE, not in component CSS.
     ============================================ */

  /* === COLORS: Primary (Emerald) === */
  --primary: #1e6b5a;
  --primary-text: #18574a;
  --primary-btn: #1e6b5a;
  --primary-hover: #175e4d;
  --primary-active: #237a66;
  --primary-60: rgba(30, 107, 90, 0.6);
  --primary-40: rgba(30, 107, 90, 0.4);
  --primary-30: rgba(30, 107, 90, 0.3);
  --primary-20: rgba(30, 107, 90, 0.2);
  --primary-10: rgba(30, 107, 90, 0.1);
  --primary-05: rgba(30, 107, 90, 0.05);

  /* === COLORS: Accent (Burnished Amber) === */
  --accent: #C17817;

  /* === COLORS: Secondary === */
  --secondary: #f43f5e;

  /* === COLORS: Backgrounds === */
  --bg-base: #fafaf9;
  --bg-surface: #ffffff;
  --bg-elevated: #f5f5f4;
  --bg-panel: rgba(245, 245, 244, 0.9);
  --bg-dark: #191919;

  /* === COLORS: Text === */
  --text-primary: #1c1917;
  --text-secondary: #78716c;
  --text-muted: #a8a29e;
  --text-on-primary: #ffffff;
  --text-on-dark: #ffffff;

  /* === COLORS: Borders === */
  --border-default: #e7e5e4;
  --border-strong: #d6d3d1;
  --border-muted: #78716c;

  /* === COLORS: Greyscale (5 levels) === */
  --grey-500: #78716c;

  /* === COLORS: Functional === */
  --status-success: #16a34a;
  --status-success-bg: rgba(22, 163, 74, 0.1);
  --status-warning: #C17817;
  --status-warning-bg: rgba(193, 120, 23, 0.1);
  --status-error: #dc2626;
  --status-error-bg: rgba(220, 38, 38, 0.1);
  --status-info: #1e6b5a;
  --status-info-bg: rgba(30, 107, 90, 0.1);

  /* === TYPOGRAPHY: Font stacks === */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "JetBrains Mono", monospace;

  /* === TYPOGRAPHY: Scale === */
  --text-h1: clamp(2.25rem, 8vw, 4.5rem);
  --text-h2: clamp(1.75rem, 6vw, 3rem);
  --text-h3: clamp(1.5rem, 4vw, 2rem);
  --text-h4: clamp(1.25rem, 3vw, 1.5rem);
  --text-body-lg: 1.125rem;
  --text-body: 1rem;
  --text-body-sm: 0.875rem;
  --text-caption: 0.75rem;
  --text-label: 0.75rem;

  /* === TYPOGRAPHY: Weights === */
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* === SPACING: 8px base scale === */
  --space-xs: 0.25rem;   /* 4px */
  --space-sm: 0.5rem;    /* 8px */
  --space-md: 1rem;      /* 16px */
  --space-lg: 1.5rem;    /* 24px */
  --space-xl: 2rem;      /* 32px */
  --space-2xl: 3rem;     /* 48px */
  --space-3xl: 4rem;     /* 64px */
  --space-4xl: 6rem;     /* 96px */

  /* === LAYOUT: Grid === */
  --grid-max-width: 74.625rem; /* 1194px */
  --grid-gutter: 1rem;
  --grid-cell-size: 2.5rem;

  /* === LAYOUT: Container === */
  --container-pad: 1rem;
  --section-pad-y: 4rem;

  /* === COMPONENTS: Cards === */

  /* === COMPONENTS: Buttons === */
  --btn-pad-y: 0.75rem;
  --btn-pad-x: 1.5rem;
  --btn-height: 3.25rem;
  --btn-height-lg: 3.75rem;
  --btn-height-sm: 2.5rem;

  /* === COMPONENTS: Inputs === */
  --input-height: 3.25rem;
  --input-pad: 0.75rem 1rem;
  --input-border: 1px solid var(--border-default);
  --input-focus-border: 2px solid var(--primary);

  /* === COMPONENTS: Corner Frame (brand signature) === */
  --corner-frame-size: 1rem;      /* 16px length */
  --corner-frame-width: 4px;      /* border width */

  /* === EFFECTS: Shadows === */
  --shadow-md: 0 4px 0.375rem -1px rgba(0, 0, 0, 0.1);

  /* === EFFECTS: Glow === */
  --glow-soft: 0 0 0.625rem rgba(30, 107, 90, 0.3);
  --glow-medium: 0 0 1.25rem rgba(30, 107, 90, 0.5);

  /* === EFFECTS: Scanline === */
  --scanline-subtle-opacity: 0.2;
  --scanline-subtle-size: 3px;
  --scanline-standard-opacity: 0.2;
  --scanline-standard-size: 4px;
  --scanline-minimal-opacity: 0.1;
  --scanline-minimal-size: 6px;

  /* === EFFECTS: Grid Pattern === */
  --grid-pattern-fine: 1.25rem;    /* 20px */
  --grid-pattern-medium: 2.5rem;   /* 40px */
  --grid-pattern-large: 5rem;      /* 80px */
  --grid-pattern-fine-opacity: 0.2;
  --grid-pattern-medium-opacity: 0.15;
  --grid-pattern-large-opacity: 0.1;

  /* === EFFECTS: Glass === */
  --glass-blur: 0.75rem;
  --glass-bg: rgba(255, 255, 255, 0.7);
  --glass-border: 1px solid rgba(255, 255, 255, 0.3);

  /* === Z-INDEX === */
  --z-dropdown: 100;
  --z-modal: 200;
  --z-toast: 300;

  /* === MOTION === */
  --duration-fast: 150ms;
  --duration-normal: 300ms;
  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);

  /* === BRAND: Logo === */
  --logo-width: 3rem;
  --logo-height: 2.5rem;
  --logo-min-width: 1.5rem;
  --logo-min-height: 1.25rem;

  /* === MISC === */
  --radius: 0;
  --header-height: 3.5rem;
  --footer-height: 3.5rem;
  --nav-dots-height: 2rem;
}

/* === RESPONSIVE OVERRIDES === */
@media (min-width: 641px) {
  :root {
    --container-pad: 2rem;
    --section-pad-y: 4rem;
  }
}

@media (min-width: 1025px) {
  :root {
    --container-pad: 2rem;
    --section-pad-y: 4rem;
  }
}

/* ============================================
   DARK THEME — token overrides
   ============================================
   Two switches:
     1. `@media (prefers-color-scheme: dark)` — auto on OS-level dark
     2. `:root[data-theme="dark"]` — explicit opt-in, beats OS default
   Plus `:root[data-theme="light"]` for forcing light on a dark OS.

   Palette: GitHub-Dark-derived neutrals + lifted Emerald + brighter
   Amber. Functional colours (success/warning/error/info) keep their
   hue but get slightly higher chroma so they read on the dark surface. */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* Backgrounds */
    --bg-base:     #0d1117;
    --bg-surface:  #161b22;
    --bg-elevated: #1c2128;
    --bg-panel:    rgba(28, 33, 40, 0.92);
    --bg-dark:     #0d1117;

    /* Text */
    --text-primary:    #e6edf3;
    --text-secondary:  #8b949e;
    --text-muted:      #6e7681;
    --text-on-primary: #ffffff;
    --text-on-dark:    #ffffff;

    /* Borders */
    --border-default: #30363d;
    --border-strong:  #484f58;
    --border-muted:   #21262d;

    /* Greys */
    --grey-500: #8b949e;

    /* Primary (emerald) — lifted for contrast on dark */
    --primary:        #2ea66e;
    --primary-text:   #56d68a;
    --primary-btn:    #2ea66e;
    --primary-hover:  #3fb37c;
    --primary-active: #56d68a;
    --primary-60: rgba(46, 166, 110, 0.6);
    --primary-40: rgba(46, 166, 110, 0.4);
    --primary-30: rgba(46, 166, 110, 0.3);
    --primary-20: rgba(46, 166, 110, 0.2);
    --primary-10: rgba(46, 166, 110, 0.1);
    --primary-05: rgba(46, 166, 110, 0.05);

    /* Accent (amber) — slightly lighter for dark surfaces */
    --accent: #f0883e;

    /* Secondary (rose) keeps hue, lifted lightness */
    --secondary: #ff6b87;

    /* Functional — keep hue, lift bg-overlay alpha so it reads */
    --status-success:    #3fb950;
    --status-success-bg: rgba(63, 185, 80, 0.16);
    --status-warning:    #f0883e;
    --status-warning-bg: rgba(240, 136, 62, 0.16);
    --status-error:      #f85149;
    --status-error-bg:   rgba(248, 81, 73, 0.16);
    --status-info:       #58a6ff;
    --status-info-bg:    rgba(88, 166, 255, 0.16);

    color-scheme: dark;
  }
}

/* Explicit dark override — wins regardless of OS preference. */
:root[data-theme="dark"] {
  --bg-base:     #0d1117;
  --bg-surface:  #161b22;
  --bg-elevated: #1c2128;
  --bg-panel:    rgba(28, 33, 40, 0.92);
  --bg-dark:     #0d1117;

  --text-primary:    #e6edf3;
  --text-secondary:  #8b949e;
  --text-muted:      #6e7681;
  --text-on-primary: #ffffff;
  --text-on-dark:    #ffffff;

  --border-default: #30363d;
  --border-strong:  #484f58;
  --border-muted:   #21262d;
  --grey-500: #8b949e;

  --primary:        #2ea66e;
  --primary-text:   #56d68a;
  --primary-btn:    #2ea66e;
  --primary-hover:  #3fb37c;
  --primary-active: #56d68a;
  --primary-60: rgba(46, 166, 110, 0.6);
  --primary-40: rgba(46, 166, 110, 0.4);
  --primary-30: rgba(46, 166, 110, 0.3);
  --primary-20: rgba(46, 166, 110, 0.2);
  --primary-10: rgba(46, 166, 110, 0.1);
  --primary-05: rgba(46, 166, 110, 0.05);

  --accent: #f0883e;
  --secondary: #ff6b87;

  --status-success:    #3fb950;
  --status-success-bg: rgba(63, 185, 80, 0.16);
  --status-warning:    #f0883e;
  --status-warning-bg: rgba(240, 136, 62, 0.16);
  --status-error:      #f85149;
  --status-error-bg:   rgba(248, 81, 73, 0.16);
  --status-info:       #58a6ff;
  --status-info-bg:    rgba(88, 166, 255, 0.16);

  color-scheme: dark;
}

/* Light force-override (for users on dark OS who want the light site). */
:root[data-theme="light"] {
  color-scheme: light;
}

/* ── Theme toggle (footer) — 3 small mono buttons.
   Sits inside .footer-links, last item. */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
  border: 1px solid var(--border-default);
  background: var(--bg-surface);
}
.theme-btn {
  background: transparent;
  border: 0;
  width: 26px;
  height: 22px;
  font: 12px/1 var(--font-mono);
  color: var(--text-muted);
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 120ms, color 120ms;
}
.theme-btn:hover { color: var(--text-primary); background: var(--bg-elevated); }
.theme-btn.is-on { background: var(--text-primary); color: var(--bg-base); }