@import url('https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght@0,400;0,500;1,400&family=Cinzel:wght@600;700&family=Syne:wght@400;500;600;700&display=swap');

:root {
  color-scheme: dark;

  /* Core surfaces */
  --ares-color-bg: #07101f;
  --ares-color-surface-1: #0c1829;
  --ares-color-surface-2: #111f35;
  --ares-color-surface-3: #172540;
  --ares-color-rim: #1e2f4a;

  /* Brand and semantic signals */
  --ares-color-gold: #c8952f;
  --ares-color-gold-bright: #f0b444;
  --ares-color-gold-soft: rgba(200, 149, 47, 0.13);
  --ares-color-gold-border: rgba(200, 149, 47, 0.25);
  --ares-color-positive: #2ecc85;
  --ares-color-positive-soft: rgba(46, 204, 133, 0.11);
  --ares-color-negative: #e05555;
  --ares-color-negative-soft: rgba(224, 85, 85, 0.11);
  --ares-color-confidence: #5aa7df;
  --ares-color-confidence-soft: rgba(90, 167, 223, 0.12);
  --ares-color-risk: #e59b48;
  --ares-color-risk-soft: rgba(229, 155, 72, 0.12);
  --ares-color-purple: #9b78e5;

  /* Readable text hierarchy */
  --ares-color-text: #e5dece;
  --ares-color-text-muted: #8fa0b8;
  --ares-color-text-dim: #71839d;
  --ares-color-text-disabled: #53657e;

  /* Borders and effects */
  --ares-border-subtle: rgba(255, 255, 255, 0.065);
  --ares-border-strong: rgba(255, 255, 255, 0.12);
  --ares-shadow-card: 0 18px 55px rgba(0, 0, 0, 0.2);
  --ares-shadow-focus: 0 0 0 3px rgba(240, 180, 68, 0.18);

  /* Typography */
  --ares-font-body: 'Syne', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ares-font-display: 'Cinzel', Georgia, serif;
  --ares-font-mono: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Type scale */
  --ares-text-hero: clamp(2.125rem, 4.3vw, 3.5625rem);
  --ares-text-page-title: clamp(1.875rem, 4vw, 2.875rem);
  --ares-text-section: 1.1875rem;
  --ares-text-card-title: 0.8125rem;
  --ares-text-body: 0.8125rem;
  --ares-text-small: 0.6875rem;
  --ares-text-meta: 0.625rem;
  --ares-text-table-head: 0.5625rem;

  /* Spacing */
  --ares-space-1: 0.25rem;
  --ares-space-2: 0.5rem;
  --ares-space-3: 0.75rem;
  --ares-space-4: 1rem;
  --ares-space-5: 1.25rem;
  --ares-space-6: 1.5rem;
  --ares-space-8: 2rem;
  --ares-space-10: 2.5rem;
  --ares-space-12: 3rem;

  /* Radius */
  --ares-radius-tag: 0.25rem;
  --ares-radius-button: 0.375rem;
  --ares-radius-panel: 0.5rem;
  --ares-radius-card: 0.625rem;
  --ares-radius-round: 999px;

  /* Layout */
  --ares-shell-max: 90rem;
  --ares-rail-width: 17.5rem;
  --ares-header-height: 4rem;

  /* Short aliases retained for terminal pages */
  --bg: var(--ares-color-bg);
  --s1: var(--ares-color-surface-1);
  --s2: var(--ares-color-surface-2);
  --s3: var(--ares-color-surface-3);
  --rim: var(--ares-color-rim);
  --gold: var(--ares-color-gold);
  --goldb: var(--ares-color-gold-bright);
  --goldd: var(--ares-color-gold-soft);
  --goldr: var(--ares-color-gold-border);
  --text: var(--ares-color-text);
  --mut: var(--ares-color-text-muted);
  --dim: var(--ares-color-text-dim);
  --up: var(--ares-color-positive);
  --upd: var(--ares-color-positive-soft);
  --dn: var(--ares-color-negative);
  --dnd: var(--ares-color-negative-soft);
  --blue: var(--ares-color-confidence);
  --purple: var(--ares-color-purple);
  --orange: var(--ares-color-risk);
  --bdr: var(--ares-border-subtle);
  --bdr2: var(--ares-border-strong);
  --shadow: var(--ares-shadow-card);
  --max: var(--ares-shell-max);

  /* Legacy aliases now point to the terminal system */
  --ares-bg: var(--ares-color-bg);
  --ares-navy: var(--ares-color-surface-2);
  --ares-gold: var(--ares-color-gold-bright);
  --ares-border: var(--ares-border-strong);
  --ares-white: var(--ares-color-text);
  --ares-text: var(--ares-color-text);
  --ares-muted: var(--ares-color-text-muted);
  --ares-up: var(--ares-color-positive);
  --ares-down: var(--ares-color-negative);
  --ares-flat: var(--ares-color-text-muted);
  --ares-shadow: var(--ares-shadow-card);
}