/* =============================================================
   AlgoBacktest — Design tokens
   Single source of truth for colors, spacing, typography, layout.
   Values copied verbatim from website/decouvrir/styles.css :root.
   Do not invent new tokens here without updating /decouvrir/ too,
   or both pages will drift apart visually.
   ============================================================= */

:root {
  /* -----------------------------------------------------------
     Background colors
     ----------------------------------------------------------- */
  --bg:             #fafaf7;   /* page background, warm off-white */
  --bg-card:        #ffffff;   /* card surface */
  --bg-soft:        #f3f4f0;   /* subtle alternating section */
  --bg-tint-green:  #ecfdf5;   /* accent tint for green callouts */
  --bg-tint-blue:   #eff6ff;   /* accent tint for blue callouts */
  --bg-pale-green:  #9FE1CB;   /* pastel green, used in illustrations */
  --bg-pale-blue:   #B5D4F4;   /* pastel blue, used in illustrations */

  /* -----------------------------------------------------------
     Text colors
     ----------------------------------------------------------- */
  --ink:        #0f172a;   /* primary text, near black */
  --ink-soft:   #475569;   /* secondary text, leads */
  --ink-mute:   #64748b;   /* tertiary, eyebrows, captions */
  --ink-faint:  #94a3b8;   /* quaternary, disabled, footnotes */

  /* -----------------------------------------------------------
     Brand and semantic colors
     ----------------------------------------------------------- */
  --green:        #16a34a;   /* AlgoBacktest accent green */
  --green-bright: #22c55e;   /* lighter green, gradients and highlights */
  --teal:         #1D9E75;   /* gradient companion to green */
  --blue:         #3b82f6;   /* secondary accent, ML/data */
  --blue-2:       #378ADD;   /* darker blue companion */
  --warn:         #b45309;   /* warnings, amber */
  --danger:       #b91c1c;   /* errors, red */

  /* Accent aliases — use these in components, not the raw colors. */
  --accent:       var(--green);
  --accent-tint:  var(--bg-tint-green);

  /* -----------------------------------------------------------
     Borders and dividers
     ----------------------------------------------------------- */
  --line:       #e6e7e0;   /* default border */
  --line-soft:  #eef0e9;   /* subtle divider, between sections */

  /* -----------------------------------------------------------
     Typography (fluid scale)
     Each font size clamps between mobile-min and desktop-max.
     ----------------------------------------------------------- */
  --t-display: clamp(34px, 5.6vw, 72px);   /* hero H1 */
  --t-h1:      clamp(28px, 4.4vw, 56px);   /* large H1 */
  --t-h2:      clamp(26px, 3.4vw, 44px);   /* section H2 */
  --t-h3:      clamp(20px, 2.2vw, 26px);   /* sub-section H3 */
  --t-lead:    clamp(17px, 1.6vw, 21px);   /* lead paragraph */
  --t-body:    16px;                       /* body text */
  --t-small:   14px;                       /* small text */
  --t-micro:   12px;                       /* eyebrows, legal mentions */

  /* -----------------------------------------------------------
     Layout and spacing
     ----------------------------------------------------------- */
  --container:        1320px;                  /* main content width — bumped from 1160 in Round 5 to give 28-inch screens more horizontal room */
  --container-narrow: 760px;                   /* narrow column width */
  --pad-x:            clamp(20px, 4vw, 56px);  /* horizontal page padding */

  /* -----------------------------------------------------------
     Border radii
     ----------------------------------------------------------- */
  --r-sm: 6px;    /* small radius, inputs, badges */
  --r-md: 10px;   /* medium radius, buttons, cards */
  --r-lg: 14px;   /* large radius, hero panels, callouts */
}