: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); }

/* ── v2 typography for legal / internal pages ────────────────────
 * Privacy/terms/sessions/agentura partials were built with the legacy
 * --text-* / --space-* tokens. To unify with the v2 auth pages (login,
 * register) we scope a v2-flavoured restyle to their root containers.
 * No partial rewrite needed — just CSS overrides on the container class.
 */
.legal-page,
.sessions-page,
.agentura-page {
  max-width: 760px;
  margin: 0 auto;
  padding: 40px 24px 80px;
  font-family: var(--v2-font-sans, 'Geist', system-ui, sans-serif);
  color: var(--v2-ink, #0e0e0c);
  line-height: 1.6;
}
.legal-page h1,
.sessions-page h1,
.agentura-page h1,
.legal-page .page-title,
.sessions-page .page-title,
.agentura-page .page-title {
  font-family: inherit;
  font-size: clamp(28px, 4.4vw, 40px);
  font-weight: 650;
  letter-spacing: -0.01em;
  line-height: 1.18;
  color: var(--v2-ink, #0e0e0c);
  margin: 8px 0 16px;
}
.legal-page h2,
.sessions-page h2,
.agentura-page h2 {
  font-family: inherit;
  font-size: 1.18rem;
  font-weight: 600;
  color: var(--v2-ink, #0e0e0c);
  margin: 28px 0 10px;
  letter-spacing: -0.005em;
}
.legal-page p,
.sessions-page p,
.agentura-page p,
.legal-page li,
.sessions-page li,
.agentura-page li,
.legal-page .page-description {
  color: var(--v2-ink-soft, #3a392f) !important;
  font-size: 0.96rem;
  line-height: 1.65;
}
.legal-page section { margin-bottom: 28px; }
.legal-page strong,
.sessions-page strong,
.agentura-page strong {
  color: var(--v2-ink, #0e0e0c) !important;
  font-weight: 600;
}
.legal-page a,
.sessions-page a,
.agentura-page a {
  color: var(--v2-teal, #14B8A6) !important;
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--v2-teal, #14B8A6) 40%, transparent);
}
.legal-page a:hover,
.sessions-page a:hover,
.agentura-page a:hover { border-bottom-color: var(--v2-teal, #14B8A6); }
.legal-page ul,
.sessions-page ul,
.agentura-page ul {
  padding-left: 20px;
  margin: 8px 0 0;
}
.legal-page .page-badge,
.sessions-page .page-badge,
.agentura-page .page-badge {
  display: inline-block;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--v2-ink-soft, #6b6a63);
  border: 1px solid var(--v2-rule-soft, #d4d2c8);
  background: var(--v2-paper-pure, #fff);
  padding: 6px 12px;
  border-radius: 999px;
  margin-bottom: 14px;
}
/* corner-frame / glitch-hover are decorative legacy treatments — neutralise */
.legal-page .corner-frame::before,
.legal-page .corner-frame::after { display: none; }
.legal-page .glitch-hover { text-shadow: none; }
.legal-page .btn,
.sessions-page .btn,
.agentura-page .btn {
  display: inline-block;
  margin-top: 28px;
  padding: 11px 22px;
  background: var(--v2-ink, #0e0e0c);
  color: #fff !important;
  border: 0;
  border-radius: 10px;
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  border-bottom: none;
}
.legal-page .btn:hover,
.sessions-page .btn:hover,
.agentura-page .btn:hover { background: var(--v2-teal, #14B8A6); color: #06231f !important; }

@media (prefers-color-scheme: dark) {
  :root[data-theme="dark"] .legal-page,
  :root[data-theme="dark"] .sessions-page,
  :root[data-theme="dark"] .agentura-page {
    color: #e6edf3;
  }
  :root[data-theme="dark"] .legal-page h1,
  :root[data-theme="dark"] .legal-page h2,
  :root[data-theme="dark"] .legal-page strong,
  :root[data-theme="dark"] .sessions-page h1,
  :root[data-theme="dark"] .sessions-page h2,
  :root[data-theme="dark"] .agentura-page h1,
  :root[data-theme="dark"] .agentura-page h2 { color: #f0eee5 !important; }
  :root[data-theme="dark"] .legal-page p,
  :root[data-theme="dark"] .legal-page li,
  :root[data-theme="dark"] .sessions-page p,
  :root[data-theme="dark"] .agentura-page p,
  :root[data-theme="dark"] .legal-page .page-description { color: #b8b2a7 !important; }
}