/* ==========================================================================
   CSS Custom Properties — Global Solutions Design System
   ========================================================================== */

:root {
  /* ---------- Color Palette ---------- */

  /* Dark theme (default) */
  --color-bg-primary:    #0F172A;
  --color-bg-secondary:  #1F3A5F;
  --color-bg-surface:    #162032;
  --color-bg-elevated:   #1e2d45;

  /* Light theme overrides (applied via [data-theme="light"]) */
  --color-bg-primary-light:   #F8FAFC;
  --color-bg-secondary-light: #e8f0f8;
  --color-bg-surface-light:   #dce8f5;
  --color-bg-elevated-light:  #ccdcee;

  /* Accent — teal #00A8A8 */
  --color-accent:        #00A8A8;
  --color-accent-hover:  #008f8f;
  --color-accent-muted:  rgba(0, 168, 168, 0.15);

  /* Primary blue (used for links, highlights) */
  --color-primary:       #0A66C2;
  --color-primary-hover: #0854a0;

  /* Text */
  --color-text-primary:   #F8FAFC;
  --color-text-secondary: #94a3b8;
  --color-text-muted:     #6B7280;
  --color-text-inverse:   #111827;

  /* Borders */
  --color-border:         rgba(255, 255, 255, 0.08);
  --color-border-strong:  rgba(255, 255, 255, 0.2);
  --color-border-accent:  var(--color-accent);

  /* Semantic */
  --color-success:  #22c55e;
  --color-error:    #ef4444;
  --color-warning:  #f59e0b;

  /* ---------- Spacing Scale ---------- */
  --space-xs:   0.25rem;   /*  4px */
  --space-sm:   0.5rem;    /*  8px */
  --space-md:   1rem;      /* 16px */
  --space-lg:   1.5rem;    /* 24px */
  --space-xl:   2rem;      /* 32px */
  --space-2xl:  3rem;      /* 48px */
  --space-3xl:  5rem;      /* 80px */

  /* ---------- Typography Scale ---------- */
  --text-sm:   0.875rem;   /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-md:   1.125rem;   /* 18px */
  --text-lg:   1.25rem;    /* 20px */
  --text-xl:   1.5rem;     /* 24px */
  --text-2xl:  2rem;       /* 32px */
  --text-3xl:  2.5rem;     /* 40px */
  --text-4xl:  3rem;       /* 48px */
  --text-5xl:  4rem;       /* 64px */
  --text-6xl:  5rem;       /* 80px */

  /* ---------- Font Families ---------- */
  --font-sans:  'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:  'JetBrains Mono', 'Fira Code', monospace;

  /* ---------- Font Weights ---------- */
  --font-regular:    400;
  --font-medium:     500;
  --font-semibold:   600;
  --font-bold:       700;
  --font-extrabold:  800;
  --font-black:      900;

  /* ---------- Line Heights ---------- */
  --leading-tight:   1.2;
  --leading-snug:    1.35;
  --leading-normal:  1.6;
  --leading-relaxed: 1.75;

  /* ---------- Border Radius ---------- */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   20px;
  --radius-full: 9999px;

  /* ---------- Shadows ---------- */
  --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 8px 32px rgba(0, 0, 0, 0.6);
  --shadow-xl:  0 16px 64px rgba(0, 0, 0, 0.7);

  /* ---------- Transitions / Timing ---------- */
  --transition-fast:    150ms ease;
  --transition-base:    250ms ease;
  --transition-slow:    400ms ease;
  --transition-slower:  600ms ease;

  --ease-in-out:  cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:     cubic-bezier(0, 0, 0.2, 1);
  --ease-in:      cubic-bezier(0.4, 0, 1, 1);

  /* ---------- Z-Index Scale ---------- */
  --z-below:    -1;
  --z-base:      0;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;

  /* ---------- Layout ---------- */
  --container-max:    1280px;
  --container-wide:   1440px;
  --container-narrow: 800px;
  --nav-height:       72px;
}

/* Light theme override */
[data-theme="light"] {
  --color-bg-primary:   var(--color-bg-primary-light);
  --color-bg-secondary: var(--color-bg-secondary-light);
  --color-bg-surface:   var(--color-bg-surface-light);
  --color-bg-elevated:  var(--color-bg-elevated-light);
  --color-text-primary:   #111827;
  --color-text-secondary: #1F3A5F;
  --color-text-muted:     #6B7280;
  --color-text-inverse:   #F8FAFC;
  --color-border:         #E5E7EB;
  --color-border-strong:  rgba(0, 0, 0, 0.2);
  --shadow-sm:  0 1px 3px rgba(15, 23, 42, 0.1);
  --shadow-md:  0 4px 12px rgba(15, 23, 42, 0.15);
  --shadow-lg:  0 8px 32px rgba(15, 23, 42, 0.2);
  --shadow-xl:  0 16px 64px rgba(15, 23, 42, 0.25);
}