/* ============================================================
   CYTECH SOLUTIONS — DESIGN TOKENS
   Brand: Navy (#0D1F3C) + Teal (#0A7C8C)
   "Data. Certainty. Results."
   ============================================================ */

:root {
  /* ── BRAND COLORS ── */
  --color-navy:          #0D1F3C;
  --color-navy-mid:      #1A3A5C;
  --color-navy-light:    #243F65;
  --color-teal:          #0A7C8C;
  --color-teal-hover:    #0B6C7A;
  --color-teal-light:    #12A0B4;
  --color-slate:         #3D5166;

  /* ── SURFACE COLORS (light mode) ── */
  --bg-page:             #F7F8FA;
  --bg-surface:          #EEF1F5;
  --bg-surface-alt:      #FFFFFF;
  --bg-dark:             #0D1F3C;
  --border:              #C8CDD5;
  --border-light:        #DDE1E6;

  /* ── TEXT (light mode) ── */
  --text-primary:        #1A1C20;
  --text-secondary:      #5D6474;
  --text-muted:          #8A9099;
  --text-on-dark:        #FFFFFF;
  --text-on-dark-muted:  rgba(255,255,255,0.65);

  /* ── SEMANTIC ── */
  --color-recovery:      #C45221;   /* revenue recovery orange */
  --color-success:       #2E7D5B;   /* confirmed/verified green */
  --color-caution:       #B08000;   /* data quality warning */

  /* ── CHART COLORS (data viz only) ── */
  --chart-1: #20808D;
  --chart-2: #A84B2F;
  --chart-3: #1B474D;
  --chart-4: #BCE2E7;
  --chart-5: #FFC553;

  /* ── TYPE SCALE (fluid) ── */
  --text-xs:   clamp(0.75rem,  0.7rem  + 0.25vw, 0.875rem);
  --text-sm:   clamp(0.875rem, 0.8rem  + 0.35vw, 1rem);
  --text-base: clamp(1rem,     0.95rem + 0.25vw, 1.125rem);
  --text-lg:   clamp(1.125rem, 1rem    + 0.75vw, 1.5rem);
  --text-xl:   clamp(1.5rem,   1.2rem  + 1.25vw, 2.25rem);
  --text-2xl:  clamp(2rem,     1.2rem  + 2.5vw,  3.5rem);
  --text-3xl:  clamp(2.5rem,   1rem    + 4vw,    5rem);
  --text-hero: clamp(3rem,     0.5rem  + 7vw,    7rem);

  /* ── SPACING (4px base) ── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* ── LAYOUT ── */
  --max-width:     1280px;
  --content-width: 900px;
  --gutter:        clamp(var(--space-6), 5vw, var(--space-16));
  --section-pad:   clamp(var(--space-12), 7vw, var(--space-24));
  --radius-sm:     4px;
  --radius-md:     8px;
  --radius-lg:     12px;

  /* ── SHORTHAND ALIASES (for inline styles in page components) ── */
  --navy:         var(--color-navy);
  --teal:         var(--color-teal);
  --teal-light:   var(--color-teal-light);
  --orange:       var(--color-recovery);
  --green:        var(--color-success);
  --surface:      var(--bg-surface-alt);
  --surface-2:    var(--bg-surface);
  --text-tertiary:  var(--text-muted);
  --font-heading: 'DM Sans', 'Segoe UI', system-ui, sans-serif;
  --font-body:    'Source Sans 3', 'Segoe UI', system-ui, sans-serif;
  --max-w:        var(--max-width);

  /* ── TRANSITIONS ── */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;

  /* ── SHADOWS ── */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.10), 0 2px 4px rgba(0,0,0,0.06);
  --shadow-lg:  0 10px 30px rgba(0,0,0,0.12), 0 4px 8px rgba(0,0,0,0.08);
  --shadow-teal: 0 4px 20px rgba(10,124,140,0.25);
}

/* Dark mode */
[data-theme="dark"] {
  --bg-page:          #0A1628;
  --bg-surface:       #0F2040;
  --bg-surface-alt:   #152848;
  --border:           #1E3355;
  --border-light:     #1A2E50;
  --text-primary:     #E8ECF0;
  --text-secondary:   #8FA0B4;
  --text-muted:       #5A7090;
  --shadow-sm:        0 1px 3px rgba(0,0,0,0.4);
  --shadow-md:        0 4px 12px rgba(0,0,0,0.5);
  --shadow-lg:        0 10px 30px rgba(0,0,0,0.6);
  /* Shorthand aliases — dark mode overrides */
  --surface:          #152848;
  --surface-2:        #0F2040;
}