/* ============================================================
   ATTICUS DESIGN SYSTEM — TOKENS
   Source: claude.ai Design project "Atticus Design System"
   (tokens/colors.css + typography.css + spacing.css + effects.css).
   Fonts load via <link> in templates/base.html, not @import.
   ============================================================ */

/* ------------------------------------------------------------
   COLOR — dark-first analytical terminal. Cool charcoal base,
   an "edge" green for value/brand, amber for confidence, rose
   for negative EV, sky for market/line-movement.
   ------------------------------------------------------------ */
:root {
  /* --- Base neutrals (cool, slightly blue-gray) --- */
  --ink-950: #08090D;   /* deepest well / app backdrop */
  --ink-900: #0D1017;   /* base app background */
  --ink-850: #12161F;   /* sunken panels, table stripes */
  --ink-800: #161C28;   /* card surface */
  --ink-750: #1B2331;   /* raised surface */
  --ink-700: #222C3C;   /* strong surface / hover fill */
  --ink-600: #2E394B;   /* strong border */
  --ink-500: #3C4859;   /* default border */
  --ink-450: #4C5A6E;   /* divider on dark */
  --ink-400: #667488;   /* muted text / disabled icon */
  --ink-300: #8A97AB;   /* secondary text */
  --ink-200: #B2BECE;   /* dim body text */
  --ink-100: #D7DFEA;   /* body text */
  --ink-50:  #EEF2F8;   /* high-emphasis text */
  --white:   #FFFFFF;

  /* --- Edge green (brand / positive value) --- */
  --edge-950: #062217;
  --edge-900: #0A3324;
  --edge-700: #14A866;
  --edge-600: #1AC276;
  --edge-500: #2CDD87;  /* PRIMARY brand */
  --edge-400: #52E89D;
  --edge-300: #86F0BB;
  --edge-tint: rgba(44, 221, 135, 0.12);

  /* --- Amber (confidence / premium / value alerts) --- */
  --amber-950: #2A1D06;
  --amber-700: #C88A18;
  --amber-500: #F5B841;
  --amber-400: #FFCB61;
  --amber-tint: rgba(245, 184, 65, 0.12);

  /* --- Rose (negative EV / losses / danger) --- */
  --rose-950: #2A0C11;
  --rose-700: #D42F41;
  --rose-500: #FF5567;
  --rose-400: #FF7C8A;
  --rose-tint: rgba(255, 85, 103, 0.12);

  /* --- Sky (market data / line movement / info) --- */
  --sky-950: #08202F;
  --sky-700: #1E7FD1;
  --sky-500: #46A6FF;
  --sky-400: #74BEFF;
  --sky-tint: rgba(70, 166, 255, 0.12);

  /* --- Confidence tiers (ranked predictions, low → elite) --- */
  --conf-lean:   #667488;
  --conf-fair:   #46A6FF;
  --conf-strong: #F5B841;
  --conf-elite:  #2CDD87;

  /* --- Semantic aliases — reference these in product CSS --- */
  /* Surfaces */
  --bg-base: var(--ink-900);
  --bg-sunken: var(--ink-850);
  --surface-card: var(--ink-800);
  --surface-raised: var(--ink-750);
  --surface-hover: var(--ink-700);
  --surface-overlay: #0B0E15;

  /* Borders */
  --border-subtle: var(--ink-600);
  --border-default: var(--ink-500);
  --border-strong: var(--ink-450);
  --divider: rgba(255, 255, 255, 0.06);

  /* Text */
  --text-primary: var(--ink-50);
  --text-secondary: var(--ink-300);
  --text-muted: var(--ink-400);
  --text-body: var(--ink-100);
  --text-inverse: var(--ink-950);
  --text-brand: var(--edge-400);

  /* Brand / interactive */
  --brand: var(--edge-500);
  --brand-hover: var(--edge-400);
  --brand-active: var(--edge-600);
  --brand-tint: var(--edge-tint);
  --on-brand: var(--ink-950);

  /* Value / EV semantics */
  --pos: var(--edge-500);
  --pos-tint: var(--edge-tint);
  --neg: var(--rose-500);
  --neg-tint: var(--rose-tint);
  --warn: var(--amber-500);
  --warn-tint: var(--amber-tint);
  --info: var(--sky-500);
  --info-tint: var(--sky-tint);

  /* Focus */
  --focus-ring: rgba(44, 221, 135, 0.55);
}

/* ------------------------------------------------------------
   TYPOGRAPHY — Space Grotesk (display), IBM Plex Sans (body),
   IBM Plex Mono (ALL data: odds, spreads, EV, %, timestamps).
   ------------------------------------------------------------ */
:root {
  --font-display: 'Space Grotesk', 'IBM Plex Sans', system-ui, sans-serif;
  --font-sans: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Type scale (px) — dense, terminal-leaning */
  --fs-display-xl: 56px;
  --fs-display-lg: 42px;
  --fs-display-md: 32px;
  --fs-heading-lg: 24px;
  --fs-heading-md: 20px;
  --fs-heading-sm: 17px;
  --fs-body-lg: 15px;
  --fs-body: 14px;
  --fs-body-sm: 13px;
  --fs-caption: 12px;
  --fs-micro: 11px;

  /* Data / numeric scale (mono) */
  --fs-data-xl: 34px;
  --fs-data-lg: 22px;
  --fs-data-md: 16px;
  --fs-data-sm: 13px;

  --lh-tight: 1.05;
  --lh-snug: 1.2;
  --lh-normal: 1.45;
  --lh-relaxed: 1.6;

  --ls-display: -0.02em;
  --ls-heading: -0.01em;
  --ls-normal: 0;
  --ls-label: 0.04em;
  --ls-mono: 0.01em;
}

/* ------------------------------------------------------------
   SPACING & LAYOUT — 4px base grid, dense by default.
   ------------------------------------------------------------ */
:root {
  --space-0: 0;
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 6px;
  --space-4: 8px;
  --space-5: 12px;
  --space-6: 16px;
  --space-7: 20px;
  --space-8: 24px;
  --space-9: 32px;
  --space-10: 40px;
  --space-11: 48px;
  --space-12: 64px;

  --pad-control-x: 14px;
  --pad-control-y: 8px;
  --pad-card: 16px;
  --pad-card-lg: 20px;

  --container-max: 1280px;
  --sidebar-w: 236px;
  --topbar-h: 56px;
  --gutter: 20px;

  --radius-xs: 3px;
  --radius-sm: 5px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 999px;

  --border-hair: 1px;
  --border-thick: 1.5px;
}

/* ------------------------------------------------------------
   EFFECTS — shadows, glows, focus, motion.
   ------------------------------------------------------------ */
:root {
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55);
  --shadow-overlay: 0 24px 64px rgba(0, 0, 0, 0.65);

  /* Inset hairline that lifts a surface on dark bg */
  --edge-hairline: inset 0 1px 0 rgba(255, 255, 255, 0.04);

  /* Glows — reserved for value / brand emphasis, never decorative */
  --glow-brand: 0 0 0 1px rgba(44, 221, 135, 0.35), 0 0 20px rgba(44, 221, 135, 0.18);
  --glow-warn: 0 0 0 1px rgba(245, 184, 65, 0.35), 0 0 20px rgba(245, 184, 65, 0.16);
  --glow-neg: 0 0 0 1px rgba(255, 85, 103, 0.35), 0 0 18px rgba(255, 85, 103, 0.16);

  --ring: 0 0 0 3px var(--focus-ring);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur-med: 200ms;
  --dur-slow: 320ms;

  --press-scale: 0.98;
  --hover-lift: -1px;

  --blur-chrome: saturate(140%) blur(12px);
}