/**
 * ============================================
 * OASIISBOX Design System - Color Tokens
 * ============================================
 *
 * IMPORTANT: Toutes les couleurs du projet DOIVENT être définies ici.
 * Aucune couleur hardcodée (hex, rgb, hsl) n'est autorisée ailleurs.
 *
 * Usage dans CSS: var(--token-name)
 * Usage dans Tailwind: Utiliser les classes configurées dans tailwind.config.js
 */

:root {
  /* ============================================
     BRAND COLORS
     ============================================ */
  --brand-primary: #6FAFD3;
  --brand-primary-rgb: 111 175 211;

  /* ============================================
     SURFACE COLORS (Backgrounds)
     ============================================ */
  /* Light Mode */
  --surface-light: #F7FAFC;
  --surface-light-rgb: 247 250 252;
  --surface-light-alt: #CFE6F3;
  --surface-light-alt-rgb: 207 230 243;
  --surface-light-elevated: #FFFFFF;
  --surface-light-elevated-rgb: 255 255 255;

  /* Dark Mode */
  --surface-dark: #0B1320;
  --surface-dark-rgb: 11 19 32;
  --surface-dark-alt: #162235;
  --surface-dark-alt-rgb: 22 34 53;
  --surface-dark-elevated: #1E2D42;
  --surface-dark-elevated-rgb: 30 45 66;

  /* ============================================
     TEXT COLORS
     ============================================ */
  --text-on-light: #2C4A63;
  --text-on-light-rgb: 44 74 99;
  --text-on-dark: #EAF1F6;
  --text-on-dark-rgb: 234 241 246;
  --text-muted: #9FB3C8;
  --text-muted-rgb: 159 179 200;

  /* ============================================
     ACTION COLORS (Buttons, Links)
     ============================================ */
  --action-primary: #4DA3D9;
  --action-primary-rgb: 77 163 217;
  --action-hover: #78C0E8;
  --action-hover-rgb: 120 192 232;
  --action-pressed: #3B8BBF;
  --action-pressed-rgb: 59 139 191;

  /* ============================================
     STATE COLORS
     ============================================ */
  --state-success: #5FB3A2;
  --state-success-rgb: 95 179 162;
  --state-success-light: #D1F0EA;
  --state-success-dark: #3D8A7A;

  --state-warning: #D9A441;
  --state-warning-rgb: 217 164 65;
  --state-warning-light: #FEF3CD;
  --state-warning-dark: #B8862E;

  --state-error: #C95A5A;
  --state-error-rgb: 201 90 90;
  --state-error-light: #F8D7DA;
  --state-error-dark: #A13D3D;

  --state-info: #6FAFD3;
  --state-info-rgb: 111 175 211;

  /* ============================================
     BORDER COLORS
     ============================================ */
  --border-light: #E2E8F0;
  --border-light-rgb: 226 232 240;
  --border-dark: #2D3E50;
  --border-dark-rgb: 45 62 80;

  /* ============================================
     GRADIENT STOPS
     ============================================ */
  --gradient-primary-from: #4DA3D9;
  --gradient-primary-to: #6FAFD3;
  --gradient-accent-from: #6FAFD3;
  --gradient-accent-via: #9FB3C8;
  --gradient-accent-to: #CFE6F3;

  /* ============================================
     GLASSMORPHISM TOKENS
     ============================================ */
  /* Light Mode Glass */
  --glass-light-bg: rgba(255, 255, 255, 0.85);
  --glass-light-bg-hover: rgba(255, 255, 255, 0.95);
  --glass-light-border: rgba(44, 74, 99, 0.08);
  --glass-light-border-hover: rgba(77, 163, 217, 0.3);

  /* Dark Mode Glass */
  --glass-dark-bg: rgba(22, 34, 53, 0.85);
  --glass-dark-bg-hover: rgba(22, 34, 53, 0.95);
  --glass-dark-border: rgba(159, 179, 200, 0.15);
  --glass-dark-border-hover: rgba(111, 175, 211, 0.3);

  /* ============================================
     SHADOW TOKENS
     ============================================ */
  --shadow-color-light: rgba(44, 74, 99, 0.1);
  --shadow-color-light-strong: rgba(44, 74, 99, 0.2);
  --shadow-color-dark: rgba(0, 0, 0, 0.3);
  --shadow-color-dark-strong: rgba(0, 0, 0, 0.5);
  --shadow-glow: rgba(111, 175, 211, 0.15);

  /* ============================================
     OPACITY TOKENS
     ============================================ */
  --opacity-muted: 0.6;
  --opacity-subtle: 0.3;
  --opacity-overlay: 0.85;

  /* ============================================
     SEMANTIC ALIASES (Light Mode Default)
     ============================================ */
  --color-background: var(--surface-light-rgb);
  --color-surface: var(--surface-light-elevated-rgb);
  --color-text: var(--text-on-light-rgb);
  --color-text-secondary: var(--text-muted-rgb);
  --color-border: var(--border-light-rgb);
  --color-primary: var(--action-primary-rgb);
}

/* ============================================
   DARK MODE OVERRIDES
   ============================================ */
.dark {
  --color-background: var(--surface-dark-rgb);
  --color-surface: var(--surface-dark-elevated-rgb);
  --color-text: var(--text-on-dark-rgb);
  --color-text-secondary: var(--text-muted-rgb);
  --color-border: var(--border-dark-rgb);
  --color-primary: var(--brand-primary-rgb);
}