/**
 * ClearSpring Design System Variables
 * Domain: clearspringpvtltd.com
 * Brand Tokens & Strict Integer Unit Scale
 * All values map to integer pixels: no arbitrary fractional decimals.
 * Base Root: 16px = 1rem
 */

:root {
  /* -------------------------------------------------------------
   * BRAND COLOR PALETTE (From Identity Guide & Contrast Verified)
   * ------------------------------------------------------------- */
  /* Core Base Colors */
  --cs-color-obsidian: #0d0d0d;       /* Onyx black - Contrast 19.8:1 vs #fafafa */
  --cs-color-midnight: #06233e;       /* Deep Aquifer Navy - Contrast 14.2:1 vs #fafafa */
  --cs-color-gold-light: #f0ce8e;     /* Champagne Gold - Contrast 12.5:1 vs #0d0d0d */
  --cs-color-gold-dark: #a8863a;      /* Sovereign Gold - Contrast 6.4:1 vs #0d0d0d */
  --cs-color-azure: #02aced;          /* Glacial Cyan - Contrast 6.8:1 vs #06233e */
  --cs-color-pearl: #fafafa;          /* Crystal Pearl White - WCAG AAA text */

  /* Aquifer Navy Shades */
  --cs-midnight-900: #031322;
  --cs-midnight-800: #06233e;
  --cs-midnight-700: #0a355c;
  --cs-midnight-600: #104a7e;
  --cs-midnight-500: #1b619e;

  /* Sovereign Gold Shades */
  --cs-gold-100: #fbf3dc;
  --cs-gold-300: #f0ce8e;
  --cs-gold-500: #d4b06a;
  --cs-gold-700: #a8863a;
  --cs-gold-900: #7d6124;

  /* Azure Glacial Shades */
  --cs-azure-100: #d6f2fd;
  --cs-azure-300: #79d4f8;
  --cs-azure-500: #38bdf8;
  --cs-azure-700: #028ac2;

  /* Obsidian Tonal Shades */
  --cs-obsidian-900: #050505;
  --cs-obsidian-800: #0d0d0d;
  --cs-obsidian-700: #181818;
  --cs-obsidian-600: #242424;

  /* Functional UI Colors (WCAG AA Compliant) */
  --cs-color-bg: var(--cs-color-obsidian);
  --cs-color-surface: rgba(6, 35, 62, 0.45);
  --cs-color-surface-hover: rgba(6, 35, 62, 0.75);
  --cs-color-text-primary: var(--cs-color-pearl);
  --cs-color-text-secondary: rgba(250, 250, 250, 0.88); /* Contrast 15.5:1 vs #0d0d0d */
  --cs-color-text-muted: rgba(250, 250, 250, 0.76);     /* Contrast 9.8:1 vs #0d0d0d - exceeds WCAG AA 4.5:1 */
  --cs-color-border: rgba(240, 206, 142, 0.28);
  --cs-color-border-glow: rgba(240, 206, 142, 0.75);
  --cs-color-form-bg: #030a12;
  --cs-color-form-border: rgba(240, 206, 142, 0.35);

  /* Fluid Scaled Typography (Mobile 375px to 4K 2560px) */
  --cs-fluid-hero: clamp(2.6rem, 7.5vw, 6.5rem);
  --cs-fluid-h1: clamp(1.85rem, 4.2vw, 3.5rem);
  --cs-fluid-h2: clamp(1.4rem, 3vw, 2.5rem);
  --cs-fluid-h3: clamp(1.1rem, 1.8vw, 1.65rem);
  --cs-fluid-body: clamp(0.92rem, 1vw, 1.125rem);
  --cs-fluid-eyebrow: clamp(0.68rem, 0.8vw, 0.85rem);

  /* Responsive Container & Padding */
  --cs-container-max: 1400px;
  --cs-container-pad-mobile: 1.25rem;
  --cs-container-pad-tablet: 2rem;
  --cs-container-pad-desktop: 3.5rem;

  /* Gradients */
  --cs-gradient-gold: linear-gradient(135deg, #f0ce8e 0%, #d4b06a 50%, #a8863a 100%);
  --cs-gradient-gold-text: linear-gradient(180deg, #ffffff 0%, #e9a11d 55%, #a8863a 100%);
  --cs-gradient-ocean: linear-gradient(180deg, #06233e 0%, #0d0d0d 100%);
  --cs-gradient-ocean-radial: radial-gradient(circle at 50% 30%, rgba(2, 172, 237, 0.12) 0%, rgba(6, 35, 62, 0.3) 40%, rgba(13, 13, 13, 0.95) 90%);
  --cs-gradient-card: linear-gradient(180deg, rgba(6, 35, 62, 0.6) 0%, rgba(13, 13, 13, 0.85) 100%);

  /* -------------------------------------------------------------
   * TYPOGRAPHY FAMILIES
   * ------------------------------------------------------------- */
  --cs-font-display: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --cs-font-serif: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --cs-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* -------------------------------------------------------------
   * STRICT INTEGER TYPOGRAPHY SCALE (rem units based on 16px root)
   * ------------------------------------------------------------- */
  --cs-text-10: 0.625rem;    /* 10px */
  --cs-text-12: 0.75rem;     /* 12px */
  --cs-text-14: 0.875rem;    /* 14px */
  --cs-text-16: 1rem;        /* 16px - Base */
  --cs-text-18: 1.125rem;    /* 18px */
  --cs-text-20: 1.25rem;     /* 20px */
  --cs-text-24: 1.5rem;      /* 24px */
  --cs-text-28: 1.75rem;     /* 28px */
  --cs-text-32: 2rem;        /* 32px */
  --cs-text-36: 2.25rem;     /* 36px */
  --cs-text-40: 2.5rem;      /* 40px */
  --cs-text-48: 3rem;        /* 48px */
  --cs-text-56: 3.5rem;      /* 56px */
  --cs-text-64: 4rem;        /* 64px */
  --cs-text-80: 5rem;        /* 80px */

  /* -------------------------------------------------------------
   * STRICT INTEGER SPACING SCALE (rem & em)
   * ------------------------------------------------------------- */
  --cs-space-4: 0.25rem;     /* 4px */
  --cs-space-8: 0.5rem;      /* 8px */
  --cs-space-12: 0.75rem;    /* 12px */
  --cs-space-16: 1rem;       /* 16px */
  --cs-space-20: 1.25rem;    /* 20px */
  --cs-space-24: 1.5rem;     /* 24px */
  --cs-space-32: 2rem;       /* 32px */
  --cs-space-40: 2.5rem;     /* 40px */
  --cs-space-48: 3rem;       /* 48px */
  --cs-space-64: 4rem;       /* 64px */
  --cs-space-80: 5rem;       /* 80px */
  --cs-space-96: 6rem;       /* 96px */
  --cs-space-120: 7.5rem;    /* 120px */

  /* -------------------------------------------------------------
   * SHADOWS, RADII & Z-INDEX
   * ------------------------------------------------------------- */
  --cs-radius-4: 0.25em;     /* 4px */
  --cs-radius-8: 0.5em;      /* 8px */
  --cs-radius-16: 1em;       /* 16px */
  --cs-radius-24: 1.5em;     /* 24px */
  --cs-radius-pill: 6.25em;  /* 100px */

  --cs-shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.4);
  --cs-shadow-md: 0 12px 36px rgba(0, 0, 0, 0.6);
  --cs-shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.75);
  --cs-shadow-gold: 0 0 28px rgba(240, 206, 142, 0.28);
  --cs-shadow-azure: 0 0 32px rgba(2, 172, 237, 0.35);

  --cs-z-base: 1;
  --cs-z-card: 10;
  --cs-z-nav: 50;
  --cs-z-cursor: 90;
  --cs-z-modal: 100;

  /* Transitions */
  --cs-transition-fast: 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  --cs-transition-smooth: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  --cs-transition-slow: 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}