@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=Inter:wght@400;500;600;700;800&family=Oswald:wght@400;500;600;700&display=swap');

:root {
  color-scheme: dark;

  --color-coal-top: #09090a;
  --color-coal: #0f0f10;
  --color-coal-bottom: #141112;
  --color-coal-soft: #171416;
  --color-red: #8f1118;
  --color-red-bright: #b61f26;
  --color-red-deep: #5e0b10;
  --color-bone: #e8ddc8;
  --color-mineral: #6e6a63;
  --color-yellow: #d2a81e;
  --color-ink: #f4ecdc;
  --color-ink-soft: rgba(232, 221, 200, 0.78);
  --color-ink-dim: rgba(232, 221, 200, 0.58);
  --color-panel: rgba(18, 18, 18, 0.94);
  --color-panel-soft: rgba(26, 22, 22, 0.9);
  --color-panel-card: rgba(11, 11, 11, 0.64);
  --color-panel-card-open: rgba(18, 14, 14, 0.78);
  --color-panel-quiet: rgba(8, 8, 8, 0.42);
  --color-panel-input: rgba(8, 8, 8, 0.92);
  --color-panel-section: rgba(10, 10, 10, 0.44);
  --color-panel-section-open: rgba(10, 10, 10, 0.62);
  --color-panel-summary: rgba(10, 10, 10, 0.5);
  --color-panel-tooltip: rgba(10, 10, 10, 0.96);
  --color-black-clear: rgba(0, 0, 0, 0);
  --color-black-shadow: rgba(0, 0, 0, 0.28);
  --color-black-shadow-strong: rgba(0, 0, 0, 0.58);
  --color-white-band: rgba(255, 255, 255, 0.08);
  --color-line: rgba(232, 221, 200, 0.18);
  --color-line-strong: rgba(232, 221, 200, 0.32);
  --color-line-faint: rgba(232, 221, 200, 0.12);
  --color-line-mid: rgba(232, 221, 200, 0.16);
  --color-divider: rgba(232, 221, 200, 0.56);
  --color-bone-glow: rgba(232, 221, 200, 0.1);
  --color-bone-fade-soft: rgba(232, 221, 200, 0.02);
  --color-bone-fade: rgba(232, 221, 200, 0.03);
  --color-bone-fade-strong: rgba(232, 221, 200, 0.04);
  --color-surface-red: rgba(143, 17, 24, 0.18);
  --color-surface-red-soft: rgba(143, 17, 24, 0.12);
  --color-surface-red-strong: rgba(143, 17, 24, 0.22);
  --color-surface-red-hover: rgba(143, 17, 24, 0.16);
  --color-surface-yellow: rgba(210, 168, 30, 0.18);
  --color-surface-yellow-soft: rgba(210, 168, 30, 0.06);
  --color-surface-yellow-strong: rgba(210, 168, 30, 0.12);
  --color-surface-red-glow-soft: rgba(182, 31, 38, 0.07);
  --color-surface-red-glow: rgba(182, 31, 38, 0.28);
  --color-surface-red-glow-strong: rgba(182, 31, 38, 0.35);
  --color-surface-red-border-soft: rgba(182, 31, 38, 0.52);
  --color-surface-red-border: rgba(182, 31, 38, 0.58);
  --color-surface-red-border-strong: rgba(182, 31, 38, 0.72);
  --color-surface-red-border-max: rgba(182, 31, 38, 0.82);
  --color-surface-red-ring: rgba(182, 31, 38, 0.16);
  --color-surface-red-inset: rgba(182, 31, 38, 0.22);
  --color-surface-yellow-border-soft: rgba(210, 168, 30, 0.3);
  --color-surface-yellow-border: rgba(210, 168, 30, 0.42);
  --color-surface-yellow-glow: rgba(210, 168, 30, 0.08);
  --color-error-border: rgba(240, 111, 96, 0.5);
  --color-focus: rgba(210, 168, 30, 0.75);
  --color-success: #c3d37f;
  --color-error: #f06f60;

  --surface-page:
    radial-gradient(circle at top, var(--color-surface-red-glow) 0%, var(--color-surface-red-glow-soft) 18%, var(--color-black-clear) 40%),
    linear-gradient(180deg, var(--color-coal-top) 0%, var(--color-coal) 48%, var(--color-coal-bottom) 100%);
  --surface-page-overlay:
    linear-gradient(135deg, var(--color-surface-red-soft) 0%, var(--color-black-clear) 28%),
    radial-gradient(circle at 85% 15%, var(--color-surface-yellow-glow) 0%, var(--color-black-clear) 18%);
  --surface-shell-band-top:
    linear-gradient(180deg, var(--color-white-band), var(--color-black-clear) 52%),
    linear-gradient(90deg, var(--color-red-bright), var(--color-red));
  --surface-shell-band-side:
    linear-gradient(35deg, var(--color-surface-red-glow-strong), var(--color-black-clear) 58%),
    linear-gradient(35deg, var(--color-bone-glow), var(--color-black-clear) 32%);
  --surface-panel:
    linear-gradient(180deg, var(--color-bone-fade-strong), var(--color-black-clear) 18%),
    linear-gradient(180deg, var(--color-surface-red-soft), var(--color-black-clear) 30%),
    var(--color-panel);
  --surface-panel-soft:
    linear-gradient(180deg, var(--color-bone-fade), var(--color-black-clear) 24%),
    var(--color-panel-soft);
  --surface-card:
    linear-gradient(180deg, var(--color-bone-fade), var(--color-black-clear) 22%),
    var(--color-panel-card);
  --surface-card-open:
    linear-gradient(180deg, var(--color-bone-fade-strong), var(--color-black-clear) 22%),
    var(--color-panel-card-open);
  --surface-card-quiet: var(--color-panel-quiet);
  --surface-section: var(--color-panel-section);
  --surface-section-open:
    linear-gradient(180deg, var(--color-bone-fade), var(--color-black-clear) 22%),
    var(--color-panel-section-open);
  --surface-summary: var(--color-panel-summary);
  --surface-input: var(--color-panel-input);
  --surface-control: var(--color-bone-fade);
  --surface-control-muted: var(--color-bone-fade-soft);
  --surface-control-strong: var(--color-bone-fade-strong);
  --surface-control-hover: var(--color-surface-red-hover);
  --surface-control-active:
    linear-gradient(180deg, var(--color-bone-fade-strong), var(--color-black-clear) 28%),
    var(--color-surface-red-strong);
  --surface-tooltip:
    linear-gradient(180deg, var(--color-bone-fade-strong), var(--color-black-clear) 24%),
    var(--color-panel-tooltip);
  --surface-divider: linear-gradient(90deg, var(--color-divider), var(--color-black-clear));
  --surface-band-line: linear-gradient(90deg, var(--color-red-bright), var(--color-line-strong), var(--color-red-bright));
  --surface-debug: var(--color-surface-yellow-soft);
  --surface-code: var(--color-panel-quiet);

  --font-title: 'Oswald', Impact, sans-serif;
  --font-body: 'Inter', 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', 'SFMono-Regular', monospace;

  --page-width: 1160px;
  --panel-width: 980px;
  --content-width: 920px;
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 28px;
  --space-1: 0.4rem;
  --space-2: 0.75rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --shadow-strong: 0 32px 90px var(--color-black-shadow-strong);
  --shadow-soft: 0 16px 40px var(--color-black-shadow);
  --shadow-shell-band: 0 0 32px var(--color-surface-red-glow);
  --shadow-inset-accent: inset 0 0 0 1px var(--color-surface-red-inset);
  --shadow-focus-accent: 0 0 0 4px var(--color-surface-red-ring);
  --filter-emblem-shadow: drop-shadow(0 10px 22px var(--color-black-shadow));
  --transition-fast: 160ms ease;
  --transition-base: 220ms ease;

  --noise-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.28'/%3E%3C/svg%3E");
}