/* =========================================================================
   DESIGN-TOKENS.CSS — Synthetic Insights Research Report System
   Brand: CISOs Connect (default)
   --------------------------------------------------------------------------
   This is the ONLY file to edit when forking to a new brand. It declares
   every palette, type, spacing, and rule token used by components.css and
   layouts.css. Fork this file, override values, keep the variable names.
   ========================================================================= */

:root {

  /* -------- 1. PALETTE -------------------------------------------------- */

  /* Primary surface — backgrounds, hero panels, H1/H2 color.
     Matches the callout/cover purple so tables, headings, and panels
     all sit in the same chromatic family as the callout boxes. */
  --color-primary:          #211047;   /* Cover purple */
  --color-primary-ink:      #211047;
  --color-primary-deep:     #14072E;   /* for gradients */
  --color-primary-on:       #FFFFFF;   /* text on primary */

  /* Cover palette — sampled from cover image; used on part openers
     and hero stat boxes so they visually rhyme with the front cover. */
  --color-cover:            #211047;   /* Deep purple-navy (cover BG) */
  --color-cover-deep:       #14072E;   /* Near-black purple for gradient floor */
  --color-cover-glow-purple:#6B2FA0;   /* Ambient purple glow */
  --color-cover-glow-teal:  #00D4AA;   /* Ambient teal glow */

  /* Single data accent — key numerals, rules, part numerals */
  --color-accent:           #00D4AA;   /* Teal */
  --color-accent-ink:       #008E72;   /* darker for body copy over white */
  --color-accent-on:        #211047;   /* text on accent (cover purple) */

  /* Secondary — section heads (H2) and secondary emphasis */
  --color-secondary:        #6B2FA0;   /* Purple */
  --color-secondary-ink:    #5A2588;

  /* Semantic callout hues */
  --color-alert:            #E53E3E;
  --color-warning:          #DD6B20;
  --color-info:             #3182CE;
  --color-success:          #2F855A;

  /* Neutrals */
  --color-ink:              #0A1628;   /* body text */
  --color-ink-muted:        #4A5568;   /* slate */
  --color-ink-subtle:       #718096;   /* warm gray — footnotes, sources */
  --color-rule:             #E2E8F0;   /* hairlines, table rules */
  --color-rule-strong:      #CBD5E0;
  --color-surface:          #FFFFFF;   /* page */
  --color-surface-alt:      #F7FAFC;   /* callout backgrounds */
  --color-surface-tint:     #EEF5FB;   /* evidence box */

  /* Data-viz series (used by SVG charts) */
  --data-1: var(--color-accent);       /* primary series */
  --data-2: var(--color-primary);      /* primary contrast */
  --data-3: var(--color-secondary);
  --data-4: var(--color-info);
  --data-5: var(--color-warning);
  --data-6: var(--color-alert);
  --data-neutral: #CBD5E0;

  /* -------- 2. TYPE ----------------------------------------------------- */

  --font-sans:   "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-serif:  "Source Serif 4", "Source Serif Pro", Georgia, serif;
  --font-mono:   "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;

  /* Fluid type scale (print-first, in pt) */
  --type-eyebrow:        9pt;   /* tracked uppercase metadata */
  --type-caption:        8.5pt;
  --type-source:         8pt;
  --type-small:          9.5pt;
  --type-body:           10.5pt;
  --type-lede:           12pt;
  --type-h4:             12pt;
  --type-h3:             15pt;
  --type-h2:             20pt;
  --type-h1:             32pt;
  --type-hero:           56pt;   /* stat numerals */
  --type-mega:           128pt;  /* part numeral */

  --leading-tight:   1.10;
  --leading-snug:    1.25;
  --leading-body:    1.50;
  --leading-lede:    1.45;

  --tracking-eyebrow: 0.14em;
  --tracking-tight:   -0.01em;
  --tracking-hero:    -0.02em;

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

  /* -------- 3. SPACING & RULES ----------------------------------------- */

  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;

  --rule-hair:    0.5pt solid var(--color-rule);
  --rule-thin:    1pt   solid var(--color-rule-strong);
  --rule-accent:  3pt   solid var(--color-accent);
  --rule-heavy:   6pt   solid var(--color-primary);

  --radius-none:  0;
  --radius-sm:    2px;   /* McKinsey-ish: nearly square everywhere */
  --radius-md:    4px;

  /* -------- 4. PAGE GEOMETRY ------------------------------------------- */

  --page-width:        8.5in;
  --page-height:       11in;
  --page-margin-top:    0.75in;
  --page-margin-bottom: 0.85in;
  --page-margin-inside: 1.25in;   /* bindable */
  --page-margin-outside:0.75in;

  /* -------- 5. CALLOUT SEMANTICS -------------------------------------- */

  --callout-default-bar:  var(--color-accent);
  --callout-default-bg:   var(--color-surface-tint);
  --callout-alert-bar:    var(--color-alert);
  --callout-alert-bg:     #FEF2F2;
  --callout-warning-bar:  var(--color-warning);
  --callout-warning-bg:   #FFFAF0;
  --callout-hero-bg:      var(--color-primary);
  --callout-hero-on:      var(--color-primary-on);
}