/*
 * ============================================================
 *  CLEAR IMPACT SYSTEMS - Design Token System
 *  All CSS custom properties for the entire site.
 *  Source: Pixel-extracted from brand assets (June 2026)
 * ============================================================
 */

:root {

  /* ── CORE PALETTE ───────────────────────────────────────── */

  /* Dark backgrounds (header, footer, hero overlays) */
  --cis-black:        #080C13;   /* Nav center bg - deepest navy */
  --cis-navy:         #0D1321;   /* Ticker / secondary dark surface */
  --cis-navy-surface: #111729;   /* Card bg on dark */
  --cis-navy-border:  #20293A;   /* Borders and dividers on dark */

  /* Brand accents */
  --cis-gold:         #CEB04E;   /* Primary CTA, ticker text, borders */
  --cis-gold-dim:     #A67D4A;   /* Copper warmth, secondary accents */
  --cis-gold-glow:    rgba(206, 176, 78, 0.15);  /* Subtle glow / hover bg */

  --cis-teal:         #32ACBB;   /* Logo S-ring, hover states, icons */
  --cis-teal-dim:     #1E7D8A;   /* Deeper teal for pressed states */
  --cis-teal-glow:    rgba(50, 172, 187, 0.12);

  --cis-blue-deep:    #11436A;   /* Logo C-ring, links, pull-quotes */

  /* Typography */
  --cis-silver:       #CDD5E0;   /* Primary text on dark backgrounds */
  --cis-silver-dim:   #8C96A4;   /* Secondary / muted text on dark */
  --cis-charcoal:     #29292B;   /* Primary body text on light backgrounds */
  --cis-charcoal-mid: #4A4A4E;   /* Secondary body text on light */
  --cis-charcoal-dim: #6B6B72;   /* Captions, metadata on light */

  /* Light backgrounds (main content) */
  --cis-white:        #F1F4F8;   /* Soft off-white — eases pure-white glare (was #FFFFFF) */
  --cis-off-white:    #E2E7EE;   /* Alternating section bg — deepened to keep cards distinct */
  --cis-rule:         #D3DAE3;   /* Horizontal rules on light bg */
  /* ── SEMANTIC ALIASES ───────────────────────────────────── */

  --color-bg-primary:      var(--cis-white);
  --color-bg-alt:          var(--cis-off-white);
  --color-bg-dark:         var(--cis-black);
  --color-bg-dark-surface: var(--cis-navy);

  --color-text-primary:    var(--cis-charcoal);
  --color-text-secondary:  var(--cis-charcoal-mid);
  --color-text-muted:      var(--cis-charcoal-dim);
  --color-text-on-dark:    var(--cis-silver);
  --color-text-on-dark-dim:var(--cis-silver-dim);

  --color-accent:          var(--cis-gold);
  --color-accent-secondary:var(--cis-teal);
  --color-link:            var(--cis-blue-deep);

  /* ── TYPOGRAPHY ─────────────────────────────────────────── */

  /*
   * EDITORIAL STACK:
   * - Display/H1-H2: "Cormorant Garamond" - high-end editorial gravitas
   * - UI/H3-H6/Nav:  "Inter" - crisp, neutral, modern
   * - Body:          "Inter" - optimal screen readability
   */
  --font-display:   'Cormorant Garamond', 'Georgia', serif;
  --font-ui:        'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:      'JetBrains Mono', 'Courier New', monospace;

  /* Type scale - 1.250 Major Third ratio */
  --text-xs:    0.64rem;    /*  ~10px */
  --text-sm:    0.8rem;     /*  ~13px */
  --text-base:  1rem;       /*  ~16px */
  --text-md:    1.25rem;    /*  ~20px */
  --text-lg:    1.563rem;   /*  ~25px */
  --text-xl:    1.953rem;   /*  ~31px */
  --text-2xl:   2.441rem;   /*  ~39px */
  --text-3xl:   3.052rem;   /*  ~49px */
  --text-4xl:   3.815rem;   /*  ~61px */
  --text-5xl:   4.768rem;   /*  ~76px */

  /* Letter spacing */
  --tracking-tight:  -0.02em;
  --tracking-normal:  0em;
  --tracking-wide:    0.08em;
  --tracking-wider:   0.15em;
  --tracking-widest:  0.25em;

  /* Line heights */
  --leading-tight:   1.15;
  --leading-snug:    1.3;
  --leading-normal:  1.6;
  --leading-relaxed: 1.8;

  /* Font weights */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* ── SPACING ────────────────────────────────────────────── */

  /* 8pt grid */
  --space-1:   0.25rem;   /*  4px */
  --space-2:   0.5rem;    /*  8px */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.25rem;   /* 20px */
  --space-6:   1.5rem;    /* 24px */
  --space-7:   1.75rem;   /* 28px */
  --space-8:   2rem;      /* 32px */
  --space-9:   2.25rem;   /* 36px */
  --space-10:  2.5rem;    /* 40px */
  --space-12:  3rem;      /* 48px */
  --space-14:  3.5rem;    /* 56px */
  --space-16:  4rem;      /* 64px */
  --space-20:  5rem;      /* 80px */
  --space-24:  6rem;      /* 96px */
  --space-32:  8rem;      /* 128px */

  /* Section padding */
  --section-pad-y:    var(--space-20);
  --section-pad-x:    var(--space-6);

  /* ── LAYOUT ─────────────────────────────────────────────── */

  --container-max:   1280px;
  --container-wide:  1440px;
  --container-narrow: 800px;

  /* ── BORDERS & RADIUS ───────────────────────────────────── */

  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-pill: 9999px;

  --border-thin:   1px solid var(--cis-navy-border);
  --border-gold:   1px solid var(--cis-gold);
  --border-teal:   1px solid var(--cis-teal);
  --border-rule:   1px solid var(--cis-rule);

  /* ── SHADOWS ────────────────────────────────────────────── */

  --shadow-sm:   0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.08);
  --shadow-md:   0 4px 16px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.08);
  --shadow-lg:   0 12px 40px rgba(0,0,0,0.18), 0 4px 12px rgba(0,0,0,0.10);
  --shadow-gold: 0 0 24px rgba(206, 176, 78, 0.20);
  --shadow-teal: 0 0 24px rgba(50, 172, 187, 0.20);

  /* ── TRANSITIONS ────────────────────────────────────────── */

  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:   cubic-bezier(0.45, 0, 0.55, 1);
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 400ms;

  --transition-base: var(--duration-base) var(--ease-out);
  --transition-fast: var(--duration-fast) var(--ease-out);

  /* ── Z-INDEX SCALE ──────────────────────────────────────── */

  --z-base:    0;
  --z-above:   10;
  --z-dropdown:200;
  --z-sticky:  300;
  --z-overlay: 400;
  --z-modal:   500;
  --z-toast:   600;
}