

:root {
  
  --c-bg: #fff9ec;
  
  --c-surface: #ffffff;
  
  --c-ink: #14213d;
  
  --c-ink-soft: #4a5568;
  
  --c-line: #e6ddc8;
  

  
  --c-blue: #1f4fff;
  --c-blue-dark: #0b2fcc;
  --c-blue-tint: #e6ecff;

  
  --c-sun: #ffb703;
  --c-sun-tint: #fff1c7;

  
  --c-coral: #ff6b35;
  --c-coral-dark: #c2410c;

  
  --c-mint: #2ec4b6;
  --c-mint-dark: #0f766e;

  
  --c-violet: #7c3aed;

  
  --c-py-kw: #1f4fff;
  --c-py-bi: #7c3aed;
  --c-py-str: #0f766e;
  --c-py-num: #c2410c;
  --c-py-com: #4a5568;
  --c-py-fn: #0b2fcc;

  
  --c-term-bg: #14213d;
  --c-term-header: #0f182b;
  --c-term-text: #f8fafc;
  --c-term-muted: #94a3b8;
  --c-term-prompt: #38bdf8;
  --c-term-output: #a7f3d0;
  --c-term-dot-r: #ff6b35;
  --c-term-dot-y: #ffb703;
  --c-term-dot-g: #2ec4b6;

  
  --accent: var(--c-blue);
  --accent-dark: var(--c-blue-dark);
  --accent-tint: var(--c-blue-tint);

  
  --font-display: "Trebuchet MS", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body: Georgia, "Times New Roman", serif;
  --font-mono: ui-monospace, Menlo, Consolas, monospace;

  
  --header-h: 64px;
  --gutter: clamp(16px, 4vw, 40px);

  
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 16px;
  --r-pill: 9999px;

  
  --shadow-hard: 4px 4px 0 var(--c-ink);
  --shadow-soft: 0 2px 12px rgba(20, 33, 61, 0.08);
  --shadow-card: 0 4px 20px rgba(20, 33, 61, 0.10);

  
  --dur-fast: 140ms;
  --dur-mid: 280ms;
  --dur-slow: 500ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}


@media (max-width: 599px) {
  :root {
    --header-h: 56px;
  }
}


[data-accent="blue"] {
  --accent: var(--c-blue);
  --accent-dark: var(--c-blue-dark);
  --accent-tint: var(--c-blue-tint);
}

[data-accent="mint"] {
  --accent: var(--c-mint);
  --accent-dark: var(--c-mint-dark);
  --accent-tint: rgba(46, 196, 182, 0.16);
}

[data-accent="coral"] {
  --accent: var(--c-coral);
  --accent-dark: var(--c-coral-dark);
  --accent-tint: rgba(255, 107, 53, 0.16);
}

[data-accent="sun"] {
  --accent: var(--c-sun);
  --accent-dark: #c07800;
  --accent-tint: var(--c-sun-tint);
}

[data-accent="violet"] {
  --accent: var(--c-violet);
  --accent-dark: #5b21b6;
  --accent-tint: rgba(124, 58, 237, 0.16);
}