/* ============================================================
   PrimeDope Design Tokens
   Version: 1.0 — March 2026

   Direction: Light editorial authority. Analytical. NYT-register.
   Audience: Serious poker players. Data-forward.

   Type:   Source Serif 4 (headlines, data numbers)
           · IBM Plex Sans (UI/body/labels)
   Accent: Deep burgundy #6B1F2A — header, footer, primary buttons
   ============================================================ */

:root {

  /* ----------------------------------------------------------
     COLOR — Neutrals
  ---------------------------------------------------------- */

  --color-bg:           #F8F7F4; /* Warm off-white. Paper, not screen. */
  --color-surface:      #FFFFFF; /* Cards, panels, raised elements */
  --color-surface-2:    #F2F1EE; /* Recessed — zebra rows, inset areas, section tint */
  --color-surface-3:    #E3E0DA; /* Deep recessed — calc panels, tool chrome */
  --color-border:       #E2E0DB; /* Dividers, table lines, field outlines */
  --color-border-heavy: #C8C5BE; /* Stronger rule — section breaks, table headers */

  --color-text-primary:   #1A1A1A; /* Headlines, body — near black */
  --color-text-secondary: #5A5A5A; /* Supporting copy, metadata */
  --color-text-muted:     #909090; /* Labels, placeholders, disabled */
  --color-text-inverse:   #FFFFFF; /* Text on dark backgrounds */


  /* ----------------------------------------------------------
     COLOR — Accent (Deep Burgundy)
     Header, footer, primary buttons. Premium, distinctive.
     Not excitement — authority.
  ---------------------------------------------------------- */

  --color-accent:           #6B1F2A;
  --color-accent-hover:     #4A1520; /* Darker on hover */
  --color-accent-subtle:    #F7EEEF; /* Tinted backgrounds, subtle highlights */
  --color-accent-border:    #C9909A; /* Accent-tinted dividers */
  --color-accent-text:      #6B1F2A; /* Burgundy text on light backgrounds */

  --color-accent-light:     #7D2533; /* Progress bar gradient top */
  --color-accent-dark:      #5A1923; /* Progress bar gradient bottom */

  --color-bg-dark:          #6B1F2A; /* Header, footer, primary button fill */
  --color-text-on-dark:     #FFFFFF; /* Text on all dark surfaces */
  --color-text-on-dark-muted: rgba(255,255,255,0.5);  /* Secondary text on dark hero */
  --color-text-on-dark-faint: rgba(255,255,255,0.35); /* Breadcrumbs, separators on dark hero */


  /* ----------------------------------------------------------
     COLOR — Semantic
     Positive/negative are data colors — independent of brand accent.
  ---------------------------------------------------------- */

  --color-danger:        #C0392B; /* High rake, unfavorable values — use sparingly */
  --color-danger-subtle: #FDF2F1;
  --color-positive:      #1B6B3A; /* Low rake, favorable values — semantic green */
  --color-positive-subtle: #EEF4F0;
  --color-warning:       #8B6914;
  --color-warning-subtle: #FBF6E9;


  /* ----------------------------------------------------------
     COLOR — Chart / Data Visualization
     For simulation lines, confidence bands, and chart elements.
     Each page can override these in its scoped styles if needed.
  ---------------------------------------------------------- */

  --color-chart-ev:       #1A1A1A; /* EV / mean line */
  --color-chart-ci70:     #86efac; /* 70% confidence band */
  --color-chart-ci95:     #16a34a; /* 95% confidence band */
  --color-chart-best:     #1B6B3A; /* Best run — uses positive green */
  --color-chart-worst:    #C0392B; /* Worst run — uses danger red */
  --color-chart-sample:   #a78bfa; /* Individual sample runs */
  --color-chart-observed: #6B1F2A; /* User's observed results — accent */
  --color-chart-drawdown: #C0392B; /* Drawdown shading */
  --color-chart-profit:   #3b82f6; /* Profit line in drawdown chart */


  /* ----------------------------------------------------------
     TYPOGRAPHY — Families
  ---------------------------------------------------------- */

  --font-serif:  'Source Serif 4', Georgia, serif;
  --font-sans:   'IBM Plex Sans', system-ui, sans-serif;
  --font-mono:   'SF Mono', 'Cascadia Code', 'Fira Code', monospace; /* Formula blocks only */

  /* Data numbers: use --font-serif at display size, --font-sans at table/label size. */


  /* ----------------------------------------------------------
     TYPOGRAPHY — Scale
     Base: 16px. Unit: rem.
  ---------------------------------------------------------- */

  --text-display: 3rem;      /* 48px — Hero stats, feature numbers */
  --text-h1:      2rem;      /* 32px — Page titles */
  --text-h2:      1.5rem;    /* 24px — Section headers */
  --text-h3:      1.125rem;  /* 18px — Card titles, sidebar heads */
  --text-body:    1rem;      /* 16px — All prose */
  --text-small:   0.875rem;  /* 14px — Metadata, captions */
  --text-label:   0.75rem;   /* 12px — Tags, table column headers */


  /* ----------------------------------------------------------
     TYPOGRAPHY — Weights
  ---------------------------------------------------------- */

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


  /* ----------------------------------------------------------
     TYPOGRAPHY — Line Heights
  ---------------------------------------------------------- */

  --leading-tight:   1.2;   /* Headlines, display text */
  --leading-snug:    1.35;  /* Subheadings, card titles */
  --leading-normal:  1.6;   /* Body prose */
  --leading-relaxed: 1.75;  /* Long-form article body */
  --leading-data:    1.4;   /* Table rows, data lists */


  /* ----------------------------------------------------------
     TYPOGRAPHY — Letter Spacing
  ---------------------------------------------------------- */

  --tracking-tight:   -0.02em; /* Large serif headlines */
  --tracking-normal:   0;
  --tracking-wide:     0.04em; /* Uppercase labels */
  --tracking-wider:    0.08em; /* Small caps, badge text */


  /* ----------------------------------------------------------
     SPACING — 4px base, powers of 2
  ---------------------------------------------------------- */

  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   24px;   /* Primary gap between related elements */
  --space-6:   32px;
  --space-7:   48px;   /* Section internal padding */
  --space-8:   64px;   /* Section separation */
  --space-9:   96px;   /* Major page sections */
  --space-10:  128px;  /* Hero-scale spacing */


  /* ----------------------------------------------------------
     BORDER RADIUS
     Tight by default. This is a data site, not a marketing site.
  ---------------------------------------------------------- */

  --radius-none: 0;
  --radius-btn:  0;    /* Buttons — sharp corners signal precision */
  --radius-sm:   2px;  /* Inputs, form elements */
  --radius-md:   4px;  /* Cards, panels */
  --radius-lg:   6px;  /* Modals, dropdowns */
  --radius-pill: 999px; /* Badges only — use reluctantly */


  /* ----------------------------------------------------------
     SHADOWS
     Subtle. Textured, not dramatic.
  ---------------------------------------------------------- */

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.08);
  --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.14), 0 0 0 1px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 8px 28px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.06);

  /* Hover-state shadows — pair with translateY(-1px) or translateY(-2px) */
  --shadow-sm-hover: 0 2px 8px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.06);
  --shadow-md-hover: 0 8px 20px rgba(0, 0, 0, 0.17), 0 0 0 1px rgba(0, 0, 0, 0.06);


  /* ----------------------------------------------------------
     LAYOUT
  ---------------------------------------------------------- */

  --max-width-content:  1200px;  /* Standard content width — matches full-bleed */

  --max-width-full:     1200px;  /* Full-bleed layouts */
  --max-width-editorial: 1440px; /* Wide pages with persistent sidebars */
  --max-width-narrow:   560px;   /* Focused forms, modals */

  --header-height:      64px;    /* Site header height for sticky offset */
  --sidebar-width:      240px;   /* TOC sidebar width */


  /* ----------------------------------------------------------
     TRANSITIONS
  ---------------------------------------------------------- */

  --transition-fast:   0.12s cubic-bezier(0.2, 0, 0, 1);
  --transition-base:   0.18s cubic-bezier(0.25, 0.1, 0.25, 1);
  --transition-slow:   0.28s cubic-bezier(0.4, 0, 0.2, 1);


  /* ----------------------------------------------------------
     Z-INDEX
  ---------------------------------------------------------- */

  --z-base:    0;
  --z-raised:  10;
  --z-subnav:  90;
  --z-sticky:  100;
  --z-overlay: 200;
  --z-modal:   300;
  --z-toast:   400;

}