/* ============================================================
   PROGAIN PROTOCOLS — CSS VARIABLES (Design Tokens)
   Source of truth for all branding & design decisions
   ============================================================ */

:root {
  /* ── BRAND COLORS ─────────────────────────────────────── */
  --accent:          #F2E400;
  --accent-light:    #F5EC3A;
  --accent-dark:     #C9BC00;
  --accent-glow:     rgba(242, 228, 0, 0.18);
  --accent-glow-md:  rgba(242, 228, 0, 0.28);

  /* ── DARK PALETTE ─────────────────────────────────────── */
  --dark:            #0A0A0A;
  --dark-2:          #111111;
  --dark-card:       #1A1A1A;
  --dark-3:          #222222;
  --dark-4:          #2A2A2A;
  --dark-border:     rgba(255, 255, 255, 0.07);
  --dark-border-md:  rgba(255, 255, 255, 0.12);

  /* ── LIGHT PALETTE ────────────────────────────────────── */
  --bg:              #F7F8FC;
  --bg-card:         #FFFFFF;
  --surface:         #EFF1F7;
  --border:          #E2E5EF;

  /* ── TEXT ─────────────────────────────────────────────── */
  --text-main:       #0D0F1A;
  --text-muted:      #6B7280;
  --text-light:      #9CA3AF;
  --text-white:      #F0F0F0;
  --text-white-muted:rgba(255, 255, 255, 0.55);

  /* ── CONTRAST CONTRACT V1 (CC-00640) ───────────────── */
  /* Brand yellow is an accent/surface, NOT light-surface body text. */
  --ui-fg-on-light:       #17191D;
  --ui-fg-muted-on-light: #555B63;
  --ui-fg-on-dark:        #F5F5F5;
  --ui-fg-muted-on-dark:  #B7BBC3;
  --ui-accent-surface:    #FAEF23;
  --ui-accent-fg:         #17191D;
  --ui-accent-text-light: #5B5700;
  --ui-light-warn-bg:     #FFFEF0;
  --ui-light-warn-border: #D8CC00;

  /* ── SEMANTIC COLORS ──────────────────────────────────── */
  --green:           #22C55E;
  --green-dark:      #16A34A;
  --green-bg:        rgba(34, 197, 94, 0.12);
  --blue:            #3B82F6;
  --blue-bg:         rgba(59, 130, 246, 0.12);
  --red:             #EF4444;
  --red-bg:          rgba(239, 68, 68, 0.12);
  --orange:          #F97316;
  --orange-bg:       rgba(249, 115, 22, 0.12);
  --purple:          #8B5CF6;
  --purple-bg:       rgba(139, 92, 246, 0.12);

  /* ── TYPOGRAPHY ───────────────────────────────────────── */
  --font:            'Inter', system-ui, sans-serif;
  --font-display:    'Barlow Condensed', sans-serif;
  --font-syne:       'Syne', sans-serif;

  /* ── SPACING ──────────────────────────────────────────── */
  --space-xs:        4px;
  --space-sm:        8px;
  --space-md:        16px;
  --space-lg:        24px;
  --space-xl:        40px;
  --space-2xl:       64px;

  /* ── RADIUS ───────────────────────────────────────────── */
  --radius-sm:       6px;
  --radius-md:       12px;
  --radius-lg:       18px;
  --radius-xl:       24px;
  --radius-full:     9999px;

  /* ── SHADOWS ──────────────────────────────────────────── */
  --shadow-sm:       0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.05);
  --shadow-md:       0 4px 16px rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.06);
  --shadow-lg:       0 10px 40px rgba(0,0,0,.15), 0 4px 12px rgba(0,0,0,.08);
  --shadow-accent:   0 4px 24px rgba(242,228,0,.20);
  --shadow-accent-lg:0 8px 40px rgba(242,228,0,.30);

  /* ── TRANSITIONS ──────────────────────────────────────── */
  --transition:      all .2s ease;
  --transition-slow: all .4s cubic-bezier(0.16, 1, 0.3, 1);

  /* ── Z-INDEX ──────────────────────────────────────────── */
  --z-base:    1;
  --z-sticky:  100;
  --z-sidebar: 200;
  --z-overlay: 500;
  --z-modal:   600;
  --z-toast:   900;
  --z-top:     9999;
}