/* ============================================================
   CARL + COMPASS DESIGN SYSTEM — TOKENS  (single source of truth)
   Reconciled 2026-06-02 from: CARL_Master_Style_Bible_v7 + Compass-Style-Guide
   Brand = set ONE class on a wrapper/body: .theme-carl or .theme-compass
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

:root {
  /* ---------- Typography ---------- */
  --carl-font: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --carl-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --carl-body-line: 1.7;        /* generous leading for long docs/body text */
  --carl-heading-line: 1.15;

  /* ---------- Core neutrals ---------- */
  --carl-navy:        #002D4C;   /* main navy (text, dark UI) */
  --carl-navy-deep:   #001930;   /* deepest — used instead of black */
  --carl-navy-soft:   #00223D;
  --carl-white:       #FFFFFF;
  --carl-off-white:   #FAFBFA;
  --carl-light-gray:  #F2F2F2;

  /* text */
  --carl-text:        #002D4C;
  --carl-text-strong: #001930;
  --carl-text-muted:  #5A6C7D;   /* small/secondary text */
  --carl-text-meta:   #5A6878;   /* meta/captions — was #8B95A0, WCAG AA (#85) */

  /* gray scale (slate) */
  --gray-50:#F8FAFC; --gray-100:#F1F5F9; --gray-200:#E2E8F0; --gray-300:#CBD5E1;
  --gray-400:#94A3B8; --gray-500:#64748B; --gray-600:#475569; --gray-700:#334155;
  --carl-border: var(--gray-200);

  /* ---------- Accent system (solid) ----------
     Sequence order for multi-step / multi-color runs:
     blue -> teal -> lime -> amber -> coral -> pink  */
  --accent-blue:       #59C9E1;
  --accent-teal:       #00E5D3;
  --accent-lime:       #A8E063;
  --accent-coral:      #F88379;
  --accent-pink:       #F671EA;
  --accent-bluepurple: #878AF7;
  --accent-pinkpurple: #C062F2;
  --accent-amber:      #FFB328;
  --accent-sage:       #5A9E78;

  /* accent tints (soft backgrounds) */
  --tint-blue:       rgba(89,201,225,0.10);
  --tint-teal:       rgba(0,229,211,0.10);
  --tint-lime:       rgba(168,224,99,0.13);
  --tint-coral:      rgba(248,131,121,0.10);
  --tint-pink:       rgba(246,113,234,0.10);
  --tint-bluepurple: rgba(135,138,247,0.13);
  --tint-pinkpurple: rgba(192,98,242,0.10);
  --tint-amber:      rgba(255,179,40,0.10);
  --tint-sage:       rgba(90,158,120,0.10);

  /* darkened accent text (accessible ON tint backgrounds — pills/badges) */
  --pill-text-blue:  #0A6C83;
  --pill-text-teal:  #00B8A9;
  --pill-text-lime:  #7AB82E;
  --pill-text-green: #4F7A16;
  --pill-text-pink:  #D94FCB;
  --pill-text-coral: #C4544B;
  --pill-text-amber: #996B00;

  /* ---------- Gradients ---------- */
  --gradient-blue-teal:  linear-gradient(135deg, #59C9E1, #00E5D3);   /* CARL brand */
  --gradient-compass:    linear-gradient(135deg, #8ED85C, #B2E86B);   /* Compass brand */
  --gradient-navy:       linear-gradient(135deg, #002D4C, #001930);
  --gradient-pink-coral: linear-gradient(135deg, #F671EA, #F88379);   /* accent only */
  --gradient-lime:       linear-gradient(135deg, #95E063, #A8E063);   /* CARL accent lime (NOT Compass) */

  /* ---------- Shadows (layered + navy-tinted = depth, not flat) ---------- */
  --carl-shadow-card:       0 1px 2px rgba(0,45,76,.05), 0 10px 26px -8px rgba(0,45,76,.12);
  --carl-shadow-card-hover: 0 2px 6px rgba(0,45,76,.07), 0 22px 44px -12px rgba(0,45,76,.20);
  --carl-shadow-btn:        0 1px 2px rgba(0,45,76,.12), 0 10px 22px -6px rgba(0,45,76,.24);
  --carl-shadow-heavy:      0 6px 16px rgba(0,25,48,.10), 0 36px 70px -18px rgba(0,25,48,.30);

  /* ---------- Surface treatment (subtle dimension on white cards) ---------- */
  --carl-surface:  linear-gradient(180deg, #FFFFFF 0%, #FCFDFE 100%);
  --carl-hairline: rgba(0,45,76,.08);              /* crisp top-lit edge */
  --carl-inset-hi: inset 0 1px 0 rgba(255,255,255,.9);

  /* ---------- Radius ---------- */
  --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 20px;
  --carl-radius: 12px; --carl-radius-pill: 999px;

  /* ---------- Spacing / layout ---------- */
  --carl-section-y:        clamp(3rem, 6vw, 5rem);   /* ~80px desktop */
  --carl-container:        1200px;
  --carl-container-narrow: 900px;
  --carl-container-wide:   1400px;
  --carl-gap:              clamp(1rem, 2.5vw, 2rem);
}

/* ============================================================
   BRAND THEMES — one class swaps the whole brand
   ============================================================ */

.theme-carl {
  --brand-grad: var(--gradient-blue-teal);   /* #59C9E1 -> #00E5D3 */
  --brand:      #00E5D3;
  --brand-soft: #59C9E1;
  --brand-deep: #00B8A9;     /* accessible brand text on light */
  --brand-ink:  #001930;     /* text that sits ON the bright brand gradient */
}

.theme-compass {
  --brand-grad: var(--gradient-compass);     /* #8ED85C -> #B2E86B */
  --brand:      #8ED85C;
  --brand-soft: #B2E86B;
  --brand-deep: #5FA833;     /* Compass green-deep */
  --brand-ink:  #001930;
}