/* ==========================================================================
   SCPL Design System Tokens (Light Mode Default & Dark Mode Override)
   Aligned with Official SCPL Company Logo:
   - Deep Corporate Blue (#284E9D / #162E61)
   - Bright Cyan / Sky Blue (#00A3E0 / #008FC5)
   - Clean White / Off-White (#FFFFFF / #F6F9FD)
   - Dark Navy Charcoal (#0D1829 / #46556E)
   ========================================================================== */

/* --------------------------------------------------------------------------
   DEFAULT: White / Light Mode (Clean Corporate Blue, Cyan & Crisp White)
   -------------------------------------------------------------------------- */
:root {
  /* Official Brand Palette from SCPL Logo */
  --brand-blue: #284E9D;              /* Logo lettering & structural framework */
  --brand-blue-dark: #162E61;         /* Deep corporate contrast */
  --brand-blue-deep: #0D1C3C;         /* High-contrast midnight corporate */
  --brand-blue-light: #EBF2FD;        /* Soft corporate blue tint */
  --brand-blue-subtle: #F2F6FE;       /* Ultra-soft blue background */

  --brand-cyan: #00A3E0;              /* Logo growth arrow & bar elements */
  --brand-cyan-hover: #008FC5;        /* Cyan hover state */
  --brand-cyan-light: #E0F5FD;        /* Soft cyan tint */
  --brand-cyan-glow: rgba(0, 163, 224, 0.25);

  /* Backgrounds & Surfaces - Clean Corporate */
  --color-bg: #FFFFFF;
  --color-bg-alt: #F6F9FD;
  --color-surface: #FFFFFF;
  --color-surface-light: #F0F4FA;
  --color-surface-elevated: #E6EDF8;
  --color-surface-glass: rgba(255, 255, 255, 0.90);

  /* Typography Colors - Dark Navy Charcoal rather than harsh pure black */
  --color-white: #0D1829;             /* Heading / Contrast text token */
  --color-text-primary: #0D1829;      /* Primary body text */
  --color-text-secondary: #46556E;    /* Secondary corporate description */
  --color-text-muted: #78879E;        /* Muted captions & dates */
  --color-text-dim: #9EABB8;          /* Dim labels & breadcrumbs */
  --color-btn-text: #FFFFFF;          /* Text on solid accent/brand buttons */

  /* Primary Accent: Logo Deep Corporate Blue */
  --color-accent: #284E9D;
  --color-accent-light: #00A3E0;      /* Cyan highlight */
  --color-accent-dark: #162E61;
  --color-accent-glow: rgba(40, 78, 157, 0.20);
  --color-accent-subtle: rgba(40, 78, 157, 0.08);

  /* Secondary Accent: Bright Cyan */
  --color-gold: #00A3E0;
  --color-gold-light: #29B8ED;
  --color-gold-subtle: rgba(0, 163, 224, 0.12);

  /* Borders & Dividers */
  --color-border: rgba(40, 78, 157, 0.14);
  --color-border-subtle: rgba(40, 78, 157, 0.07);
  --color-border-hover: #00A3E0;
  --color-border-gold: rgba(0, 163, 224, 0.35);
  --color-grid-line: rgba(40, 78, 157, 0.04);
  --color-modal-backdrop: rgba(13, 28, 60, 0.70);

  /* Typography Families */
  --font-primary: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace;

  /* Font Sizes */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 2rem;
  --text-4xl: 2.75rem;
  --text-5xl: 3.75rem;
  --text-6xl: 4.75rem;

  /* Line Heights */
  --leading-tight: 1.1;
  --leading-snug: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.7;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --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 Containers */
  --container-max: 1280px;
  --container-narrow: 980px;
  --container-padding: 1.75rem;

  /* Border Radii */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-full: 9999px;

  /* Shadows - Light Mode */
  --shadow-sm: 0 2px 8px rgba(40, 78, 157, 0.06);
  --shadow-md: 0 8px 24px rgba(40, 78, 157, 0.09);
  --shadow-lg: 0 16px 48px rgba(40, 78, 157, 0.12);
  --shadow-accent: 0 0 30px rgba(40, 78, 157, 0.18);
  --shadow-gold: 0 0 30px rgba(0, 163, 224, 0.16);

  /* Transitions */
  --transition-fast: 0.18s ease;
  --transition-normal: 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow: 0.5s cubic-bezier(0.16, 1, 0.3, 1);

  /* Z-Index Hierarchy */
  --z-base: 1;
  --z-card: 10;
  --z-dropdown: 100;
  --z-sticky: 500;
  --z-header: 1000;
  --z-modal: 2000;
  --z-loader: 9999;
}

/* --------------------------------------------------------------------------
   DARK MODE OVERRIDE (Deep Navy Corporate, Crisp Cyan & White)
   -------------------------------------------------------------------------- */
[data-theme="dark"] {
  --color-bg: #090E17;
  --color-surface: #0F1726;
  --color-surface-light: #162238;
  --color-surface-elevated: #1C2B47;
  --color-surface-glass: rgba(15, 23, 38, 0.88);

  --color-white: #FFFFFF;
  --color-text-primary: #F0F4FA;
  --color-text-secondary: #9DB0CC;
  --color-text-muted: #6B7E9C;
  --color-text-dim: #4B5A73;
  --color-btn-text: #FFFFFF;

  --color-accent: #284E9D;
  --color-accent-light: #00A3E0;
  --color-accent-dark: #1A356E;
  --color-accent-glow: rgba(0, 163, 224, 0.25);
  --color-accent-subtle: rgba(40, 78, 157, 0.15);

  --color-gold: #00A3E0;
  --color-gold-light: #29B8ED;
  --color-gold-subtle: rgba(0, 163, 224, 0.15);

  --color-border: rgba(255, 255, 255, 0.10);
  --color-border-subtle: rgba(255, 255, 255, 0.05);
  --color-border-hover: #00A3E0;
  --color-border-gold: rgba(0, 163, 224, 0.35);
  --color-grid-line: rgba(255, 255, 255, 0.03);
  --color-modal-backdrop: rgba(9, 14, 23, 0.85);

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.65);
  --shadow-accent: 0 0 35px rgba(0, 163, 224, 0.22);
  --shadow-gold: 0 0 35px rgba(0, 163, 224, 0.18);
}