:root {
  --font-sans: "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "Cascadia Mono", "Cascadia Code", Consolas, ui-monospace, monospace;

  /* Slate palette — cool dark grey */
  --bg: #0d1117;
  --bg-elevated: #161b22;
  --surface: #1c2128;
  --surface-hover: #262c36;
  --surface-active: #2d333b;
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.15);

  --text: #d4d4d4;
  --text-muted: #9ca3af;
  --text-faint: #6b7280;

  /* SoundCloud orange accent */
  --accent: #94a3b8;
  --accent-hover: #cbd5e1;
  --accent-soft: rgba(108, 182, 255, 0.08);
  --accent-border: rgba(108, 182, 255, 0.35);
  --accent-warm: #94a3b8;
  --accent-warm-soft: rgba(108, 182, 255, 0.08);
  --accent-2: #4a9ee8;
  --color-ring: #94a3b8;

  --cta: #94a3b8;
  --cta-hover: #cbd5e1;
  --cta-soft: rgba(108, 182, 255, 0.1);

  --brand-name: #d4d4d4;
  --brand-tld: #94a3b8;
  --brand-surface: #1c2128;
  --brand-border: rgba(108, 182, 255, 0.25);

  --success: #5ba32b;
  --warning: #fbbf24;
  --danger: #e94142;

  --kmap-loop-1: #cbd5e1;
    --kmap-loop-2: #94a3b8;
    --kmap-loop-3: #a9b6cc;
    --kmap-loop-4: #7c8ba1;
    --kmap-loop-5: #b4c2d8;
    --kmap-loop-6: #cbd5e1;
  --kmap-varbar: rgba(240, 240, 240, 0.92);

  --radius-sm: 0px;
  --radius: 0px;
  --radius-lg: 0px;
  --radius-xl: 0px;

  --shadow-sm: none;
  --shadow: none;
  --shadow-glow: none;

  /* TTL tokens */
  --ttl-bg: #0d1117;
  --ttl-header: #161b22;
  --ttl-surface: #1c2128;
  --ttl-surface-hover: #262c36;
  --ttl-orange: #94a3b8;
  --ttl-orange-hover: #cbd5e1;
  --ttl-text: #d4d4d4;
  --ttl-text-muted: #9ca3af;
  --ttl-text-faint: #6b7280;
  --ttl-border: rgba(255, 255, 255, 0.08);
  --ttl-border-strong: rgba(255, 255, 255, 0.15);

  --sidebar-w: 260px;
  --bar-h: 44px;
  --content-max: 48rem;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-smooth: cubic-bezier(0.33, 1, 0.68, 1);
  --ease-flow-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 80ms;
  --dur: 120ms;
  --dur-slow: 200ms;
  --dur-flow: 180ms;
  --dur-enter: 250ms;
  --time-panel-h: min(calc(100dvh - 6rem), 760px);
  --hash-panel-h: min(calc(100dvh - 6rem), 760px);
}

@property --time-open {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

@property --hash-open {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

@media (prefers-color-scheme: light) {
  :root.auto-theme {
    --bg: #f5f5f5;
    --bg-elevated: #ffffff;
    --surface: #ffffff;
    --surface-hover: #f0f0f0;
    --surface-active: #e4e4e4;
    --border: rgba(0, 0, 0, 0.08);
    --border-strong: rgba(0, 0, 0, 0.14);
    --text: #1a1a1a;
    --text-muted: #666666;
    --text-faint: #999999;
    --accent: #94a3b8;
    --accent-hover: #cc4400;
    --accent-soft: rgba(108, 182, 255, 0.08);
    --brand-tld: #94a3b8;
    --shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  }
}