/* Cyberplex Design System Tokens
 * Version: 1.2.1 - Light Theme Default with Homepage Colors
 *
 * Light Mode (Default): #F7FBFB background
 * Dark Mode: Optional via data-theme="dark"
 */

/* ==========================================================================
   LIGHT MODE (Default) - Homepage Style
   ========================================================================== */
:root {
  /* Background Colors - Light Theme */
  --cp-bg: #F7FBFB;
  --cp-bg-rgb: 247, 251, 251;
  --cp-surface: #FFFFFF;
  --cp-surface-rgb: 255, 255, 255;
  --cp-surface-2: #F0F7F7;
  --cp-surface-2-rgb: 240, 247, 247;
  --cp-surface-3: #E8F0F0;
  --cp-surface-3-rgb: 232, 240, 240;

  /* Text Colors - Light Theme */
  --cp-ink: #0B1418;
  --cp-ink-rgb: 11, 20, 32;
  --cp-text: #1F2C33;
  --cp-text-rgb: 31, 44, 51;
  --cp-text-secondary: #5B7378;
  --cp-text-secondary-rgb: 91, 115, 120;
  --cp-muted: #5B7378;
  --cp-muted-rgb: 91, 115, 120;

  /* Brand Colors - Teal/Mint Palette (Homepage Style) */
  --cp-deep: #003242;
  --cp-deep-rgb: 0, 50, 66;
  --cp-primary: #007C87;
  --cp-primary-rgb: 0, 124, 135;
  --cp-primary-hover: #006B77;
  --cp-accent: #3EFDD1;
  --cp-accent-rgb: 62, 253, 209;
  --cp-accent-hover: #2DF5C8;
  --cp-accent-2: #7be495;
  --cp-accent-2-rgb: 123, 228, 149;

  /* Semantic Colors */
  --cp-success: #48BB78;
  --cp-success-rgb: 72, 187, 120;
  --cp-danger: #E53E3E;
  --cp-danger-rgb: 229, 62, 62;
  --cp-warning: #ED8936;
  --cp-warning-rgb: 237, 137, 54;
  --cp-tint: #E5F7F5;

  /* Borders & Effects */
  --cp-border: #D6E6E6;
  --cp-border-subtle: rgba(0, 124, 135, 0.15);
  --cp-focus: rgba(0, 124, 135, 0.22);
  --cp-shadow: 0 10px 15px rgba(0, 0, 0, 0.08);
  --cp-shadow-lg: 0 18px 40px rgba(0, 0, 0, 0.12);
  --cp-hero-grad: linear-gradient(135deg, #003242 0%, #007C87 55%, #3EFDD1 100%);
  --cp-overlay: rgba(11, 20, 32, 0.7);

  /* Spacing (8px scale) */
  --cp-space-1: 4px;
  --cp-space-2: 8px;
  --cp-space-3: 12px;
  --cp-space-4: 16px;
  --cp-space-5: 24px;
  --cp-space-6: 32px;
  --cp-space-7: 40px;
  --cp-space-8: 48px;
  --cp-space-9: 64px;
  --cp-space-10: 80px;

  /* Semantic spacing */
  --cp-space-xs: var(--cp-space-1);
  --cp-space-sm: var(--cp-space-2);
  --cp-space-md: var(--cp-space-4);
  --cp-space-lg: var(--cp-space-5);
  --cp-space-xl: var(--cp-space-6);
  --cp-space-2xl: var(--cp-space-7);

  /* Other tokens */
  --cp-transition: all 0.3s ease;
  --cp-radius: 14px;
  --cp-radius-sm: 10px;

  /* Legacy aliases for backwards compatibility */
  --primary-color: var(--cp-primary);
  --secondary-color: var(--cp-primary-hover);
  --accent-color: var(--cp-primary);
  --text-dark: var(--cp-ink);
  --text-light: var(--cp-text);
  --text-muted: var(--cp-muted);
  --bg-light: var(--cp-bg);
  --bg-white: var(--cp-surface);
  --border-color: var(--cp-border);

  /* Homepage-specific tokens */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  --radius: 8px;
  --container-max: 1200px;
  --container-padding: 20px;
}

/* ==========================================================================
   DARK MODE - Optional (Homepage Style)
   ========================================================================== */
:root[data-theme="dark"],
:root.theme-dark {
  /* Background Colors - Dark Theme */
  --cp-bg: #0b1020;
  --cp-bg-rgb: 11, 16, 32;
  --cp-surface: #101a33;
  --cp-surface-rgb: 16, 26, 51;
  --cp-surface-2: #162143;
  --cp-surface-2-rgb: 22, 33, 67;
  --cp-surface-3: #1c2a52;
  --cp-surface-3-rgb: 28, 42, 82;

  /* Text Colors - Dark Theme */
  --cp-ink: #eaf0ff;
  --cp-ink-rgb: 234, 240, 255;
  --cp-text: #eaf0ff;
  --cp-text-rgb: 234, 240, 255;
  --cp-text-secondary: #b9c6e6;
  --cp-text-secondary-rgb: 185, 198, 230;
  --cp-muted: #b9c6e6;
  --cp-muted-rgb: 185, 198, 230;

  /* Brand Colors - Teal/Mint Palette (Homepage Style) */
  --cp-deep: #003242;
  --cp-deep-rgb: 0, 50, 66;
  --cp-primary: #00A2AA;
  --cp-primary-rgb: 0, 162, 170;
  --cp-primary-hover: #3EFDD1;
  --cp-accent: #3EFDD1;
  --cp-accent-rgb: 62, 253, 209;
  --cp-accent-hover: #2DF5C8;
  --cp-accent-2: #7be495;
  --cp-accent-2-rgb: 123, 228, 149;

  /* Semantic Colors - Adjusted for Dark */
  --cp-success: #7be495;
  --cp-success-rgb: 123, 228, 149;
  --cp-danger: #FC8181;
  --cp-danger-rgb: 252, 129, 129;
  --cp-warning: #F6AD55;
  --cp-warning-rgb: 246, 173, 85;
  --cp-tint: rgba(62, 253, 209, 0.15);

  /* Borders & Effects - Dark */
  --cp-border: rgba(234, 240, 255, 0.14);
  --cp-border-subtle: rgba(234, 240, 255, 0.08);
  --cp-focus: rgba(62, 253, 209, 0.35);
  --cp-shadow: 0 10px 15px rgba(0, 0, 0, 0.35);
  --cp-shadow-lg: 0 18px 40px rgba(0, 0, 0, 0.45);
  --cp-hero-grad: linear-gradient(135deg, #003242 0%, #007C87 55%, #3EFDD1 100%);
  --cp-overlay: rgba(11, 16, 32, 0.85);
}

/* ==========================================================================
   SYSTEM PREFERENCE - Respect user's OS setting
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]):not(.theme-light) {
    /* Background Colors */
    --cp-bg: #0b1020;
    --cp-surface: #101a33;
    --cp-surface-2: #162143;
    --cp-surface-3: #1c2a52;

    /* Text Colors */
    --cp-ink: #eaf0ff;
    --cp-text: #eaf0ff;
    --cp-text-secondary: #b9c6e6;
    --cp-muted: #b9c6e6;

    /* Brand Colors */
    --cp-primary: #00A2AA;
    --cp-primary-hover: #3EFDD1;
    --cp-accent: #3EFDD1;
    --cp-accent-hover: #2DF5C8;

    /* Borders */
    --cp-border: rgba(234, 240, 255, 0.14);
    --cp-border-subtle: rgba(234, 240, 255, 0.08);
  }
}