/**
 * Digicloud Africa Partner Portal — Central Design Token System
 * Governs the 4 core themes:
 * 1. original       — Legacy portal aesthetic baseline
 * 2. new-light      — Modern clean SaaS light theme
 * 3. new-dark       — Modern low-eye-strain neutral dark theme
 * 4. refreshed-navy — Modernized signature Digicloud corporate navy with strict alignment
 */

:root {
  /* =========================================================================
   * Geometry & Spacing (Universal across all themes)
   * ========================================================================= */
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;

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

  /* Typography Stacks */
  --font-sans: 'Google Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Consolas, 'Liberation Mono', Menlo, Courier, monospace;

  /* Animation Timings */
  --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Touch Boundaries & Mobile Ergonomics */
  --touch-target-min: 44px;
  --safe-area-top: env(safe-area-inset-top, 0px);
  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
  --safe-area-left: env(safe-area-inset-left, 0px);
  --safe-area-right: env(safe-area-inset-right, 0px);
}

/* ===========================================================================
 * THEME 1: ORIGINAL (Classic Portal Baseline)
 * =========================================================================== */
:root,
[data-theme="original"] {
  --theme-name: "Original";
  --color-background: #031D40;
  --color-surface: #07254e;
  --color-surface-hover: #0c336b;
  --color-surface-elevated: #0e3b7b;

  --color-text: #FFFFFF;
  --color-text-secondary: #D7D1C4;
  --color-text-muted: #8ca2c0;
  --color-text-inverse: #031D40;

  --color-border: #153e74;
  --color-border-subtle: rgba(215, 209, 196, 0.15);
  --color-border-focus: #FFBF3B;

  --color-primary: #FFBF3B;
  --color-primary-hover: #e5a72e;
  --color-primary-fg: #031D40;

  --color-accent: #00A0DF;
  --color-success: #007078;
  --color-warning: #FFBF3B;
  --color-danger: #E24301;

  --shadow-sm: 0 2px 5px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6);
  --glass-border: rgba(255, 255, 255, 0.1);
  --glass-bg: rgba(7, 37, 78, 0.85);
}

/* ===========================================================================
 * THEME 2: NEW LIGHT (Modern Clean SaaS)
 * =========================================================================== */
[data-theme="new-light"] {
  --theme-name: "New Light";
  --color-background: #F8FAFC;
  --color-surface: #FFFFFF;
  --color-surface-hover: #F1F5F9;
  --color-surface-elevated: #FFFFFF;

  --color-text: #0F172A;
  --color-text-secondary: #475569;
  --color-text-muted: #94A3B8;
  --color-text-inverse: #FFFFFF;

  --color-border: #E2E8F0;
  --color-border-subtle: #F1F5F9;
  --color-border-focus: #0284C7;

  --color-primary: #0284C7;
  --color-primary-hover: #0369A1;
  --color-primary-fg: #FFFFFF;

  --color-accent: #6366F1;
  --color-success: #10B981;
  --color-warning: #F59E0B;
  --color-danger: #EF4444;

  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.05), 0 1px 2px rgba(15, 23, 42, 0.03);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 12px 28px rgba(15, 23, 42, 0.12);
  --glass-border: rgba(226, 232, 240, 0.8);
  --glass-bg: rgba(255, 255, 255, 0.88);
}

/* ===========================================================================
 * THEME 3: NEW DARK (Modern Midnight Slate)
 * =========================================================================== */
[data-theme="new-dark"] {
  --theme-name: "New Dark";
  --color-background: #0B1120;
  --color-surface: #1E293B;
  --color-surface-hover: #28354E;
  --color-surface-elevated: #334155;

  --color-text: #F8FAFC;
  --color-text-secondary: #CBD5E1;
  --color-text-muted: #64748B;
  --color-text-inverse: #0B1120;

  --color-border: #334155;
  --color-border-subtle: rgba(51, 65, 85, 0.5);
  --color-border-focus: #38BDF8;

  --color-primary: #38BDF8;
  --color-primary-hover: #0EA5E9;
  --color-primary-fg: #0B1120;

  --color-accent: #818CF8;
  --color-success: #34D399;
  --color-warning: #FBBF24;
  --color-danger: #F87171;

  --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 16px 36px rgba(0, 0, 0, 0.7);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-bg: rgba(30, 41, 59, 0.85);
}

/* ===========================================================================
 * THEME 4: REFRESHED NAVY (Signature Digicloud Classic Reimagined)
 * =========================================================================== */
[data-theme="refreshed-navy"] {
  --theme-name: "Refreshed Navy";
  --color-background: #021530;
  --color-surface: #062349;
  --color-surface-hover: #0A3166;
  --color-surface-elevated: #0E3E80;

  --color-text: #FFFFFF;
  --color-text-secondary: #CFDAE8;
  --color-text-muted: #7997BF;
  --color-text-inverse: #021530;

  --color-border: rgba(0, 160, 223, 0.24);
  --color-border-subtle: rgba(255, 255, 255, 0.09);
  --color-border-focus: #FFBF3B;

  --color-primary: #00A0DF;
  --color-primary-hover: #0088BE;
  --color-primary-fg: #FFFFFF;

  --color-accent: #FFBF3B;
  --color-success: #007078;
  --color-warning: #FFBF3B;
  --color-danger: #E24301;

  --shadow-sm: 0 2px 8px rgba(2, 21, 48, 0.5);
  --shadow-md: 0 6px 20px rgba(0, 16, 40, 0.65);
  --shadow-lg: 0 16px 40px rgba(0, 10, 30, 0.85);
  --glass-border: rgba(0, 160, 223, 0.3);
  --glass-bg: rgba(6, 35, 73, 0.88);
}