/* =============================================================
   SKILLS DZ — DESIGN TOKENS (PHASE 1)
   -------------------------------------------------------------
   Fondation globale, uniquement des variables.
   AUCUN selecteur de composant ici.

   Regles d'or :
   - Tout est prefixe `--sdz-` : aucune collision avec le legacy
     (main.css, auth.css, dashboard.css, academy.css, admin.css).
   - Ne JAMAIS redéfinir ici une variable legacy non préfixée
     (`--text-secondary`, `--error`, `--dash-*`, `--brand-*`...).
     C'est ce qui a cassé le dashboard (audit Phase 0).
   - Les tokens sémantiques pilotent la couleur, la primitive
     n'est jamais utilisée directement dans un composant.

   Thème par défaut : DARK (dashboard / admin sont le cœur produit).
   Thème clair opt-in : <html data-sdz-theme="light">

   Ordre de chargement recommandé (avant le CSS legacy) :
     <link rel="stylesheet" href=".../tokens.css">
   ============================================================= */

/* =============================================================
   1. PRIMITIVES — palette brute
   Interdites d'usage direct dans les composants.
   ============================================================= */
:root {
  /* --- Marque --- */
  --sdz-palette-navy: #0b1331;   /* bleu nuit — fond le plus profond */
  --sdz-palette-blue: #1e5bff;   /* bleu électrique — action primaire */
  --sdz-palette-cyan: #00c4ff;   /* cyan — accent, focus, progression */

  /* --- Neutres sombres (thème dark) --- */
  --sdz-palette-night-900: #060b1c;
  --sdz-palette-night-800: #090f27;
  --sdz-palette-night-700: #0f1117;
  --sdz-palette-night-600: #13151e;
  --sdz-palette-night-500: #1c2035;

  /* --- Gris texte --- */
  --sdz-palette-grey-050: #f4f7ff;  /* texte sur fond sombre */
  --sdz-palette-grey-400: #8e9ab8;  /* texte tertiaire sur fond sombre */
  --sdz-palette-grey-500: #a8b3d1;  /* texte secondaire sur fond sombre */
  --sdz-palette-grey-900: #101a35;  /* texte sur fond clair */
  --sdz-palette-grey-600: #5b6784;  /* texte secondaire sur fond clair */
  --sdz-palette-grey-200: #e3e9f8;  /* bordure sur fond clair */
  --sdz-palette-grey-050-bg: #f3f5f9;
  --sdz-palette-white: #ffffff;

  /* --- Statuts :fills (fonds pleins, texte foncé/saturé) --- */
  --sdz-palette-success: #16a34a;
  --sdz-palette-warning: #b45309;
  --sdz-palette-danger: #e11d48;
  --sdz-palette-info: #0284c7;

  /* --- Statuts : texte lisible sur fond sombre --- */
  --sdz-palette-success-text: #4ade80;
  --sdz-palette-warning-text: #fbbf24;
  --sdz-palette-danger-text: #ff7a8a;
  --sdz-palette-info-text: #7dd3fc;

  /* --- Alpha utilitaires --- */
  --sdz-alpha-04: rgba(0, 196, 255, 0.04);
  --sdz-alpha-08: rgba(0, 196, 255, 0.08);
  --sdz-alpha-12: rgba(0, 196, 255, 0.12);
  --sdz-alpha-16: rgba(0, 196, 255, 0.16);
  --sdz-alpha-45: rgba(0, 196, 255, 0.45);
}

/* =============================================================
   2. COULEURS SÉMANTIQUES — thème DARK (défaut)
   ============================================================= */
:root {
  /* --- Fonds --- */
  --sdz-bg: var(--sdz-palette-night-800);          /* #090f27 — aligné sur le dashboard */
  --sdz-bg-subtle: var(--sdz-palette-night-900);   /* encore plus profond */
  --sdz-bg-elevated: var(--sdz-palette-night-700);  /* surfaces flottantes */

  /* --- Surfaces --- */
  --sdz-surface: rgba(15, 17, 23, 0.92);           /* panneaux principaux */
  --sdz-surface-2: rgba(19, 21, 30, 0.92);         /* panneaux imbriqués */
  --sdz-surface-hover: rgba(30, 41, 59, 0.72);      /* survol */
  --sdz-surface-active: rgba(37, 51, 79, 0.86);     /* actif / sélectionné */
  --sdz-surface-overlay: rgba(6, 11, 28, 0.72);     /* backdrop modal */
  --sdz-surface-sunken: rgba(6, 11, 28, 0.5);       /* wells, code, inputs */

  /* --- Bordures --- */
  --sdz-border: rgba(65, 77, 120, 0.38);
  --sdz-border-subtle: rgba(65, 77, 120, 0.2);
  --sdz-border-strong: rgba(93, 110, 168, 0.62);
  --sdz-border-accent: var(--sdz-alpha-45);

  /* --- Actions --- */
  --sdz-primary: var(--sdz-palette-blue);
  --sdz-primary-hover: #3d76ff;
  --sdz-primary-active: #1743cc;
  --sdz-primary-subtle: rgba(30, 91, 255, 0.16);
  --sdz-primary-text: var(--sdz-palette-white);

  --sdz-accent: var(--sdz-palette-cyan);
  --sdz-accent-hover: #4ad4ff;
  --sdz-accent-active: #00a3d6;
  --sdz-accent-subtle: var(--sdz-alpha-12);
  --sdz-accent-text: var(--sdz-palette-night-900);

  /* --- Texte --- */
  --sdz-text: var(--sdz-palette-grey-050);          /* 17:1 sur --sdz-bg */
  --sdz-text-secondary: var(--sdz-palette-grey-500);
  --sdz-text-muted: var(--sdz-palette-grey-400);    /* 5.2:1 — AA corps */
  --sdz-text-inverse: var(--sdz-palette-night-900);
  --sdz-text-on-primary: var(--sdz-palette-white);  /* 5.25:1 sur --sdz-primary */
  --sdz-text-disabled: rgba(244, 247, 255, 0.38);

  /* --- Statuts (3 rôles : fond / texte / bordure) --- */
  --sdz-success: var(--sdz-palette-success);
  --sdz-success-text: var(--sdz-palette-success-text);
  --sdz-success-subtle: rgba(74, 222, 128, 0.14);
  --sdz-success-border: rgba(74, 222, 128, 0.4);

  --sdz-warning: var(--sdz-palette-warning);
  --sdz-warning-text: var(--sdz-palette-warning-text);
  --sdz-warning-subtle: rgba(251, 191, 36, 0.14);
  --sdz-warning-border: rgba(251, 191, 36, 0.4);

  --sdz-danger: var(--sdz-palette-danger);
  --sdz-danger-text: var(--sdz-palette-danger-text);
  --sdz-danger-subtle: rgba(255, 122, 138, 0.14);
  --sdz-danger-border: rgba(255, 122, 138, 0.4);

  --sdz-info: var(--sdz-palette-info);
  --sdz-info-text: var(--sdz-palette-info-text);
  --sdz-info-subtle: rgba(125, 211, 252, 0.14);
  --sdz-info-border: rgba(125, 211, 252, 0.4);

  /* --- Focus : unique source de vérité du ring --- */
  --sdz-focus-ring-color: var(--sdz-alpha-45);
  --sdz-focus-ring-width: 3px;
  --sdz-focus-ring-offset: 2px;
}

/* =============================================================
   3. COULEURS SÉMANTIQUES — thème CLAIR (opt-in)
   Usage : <html data-sdz-theme="light">
   Cible : landing, auth, Academy (aujourd'hui en clair).
   ============================================================= */
[data-sdz-theme="light"] {
  --sdz-bg: var(--sdz-palette-grey-050-bg);
  --sdz-bg-subtle: var(--sdz-palette-white);
  --sdz-bg-elevated: var(--sdz-palette-white);

  --sdz-surface: var(--sdz-palette-white);
  --sdz-surface-2: #f7f9ff;
  --sdz-surface-hover: #eef2ff;
  --sdz-surface-active: #e4ebff;
  --sdz-surface-overlay: rgba(11, 19, 49, 0.45);
  --sdz-surface-sunken: #f1f5ff;

  --sdz-border: var(--sdz-palette-grey-200);
  --sdz-border-subtle: #eef2fb;
  --sdz-border-strong: #c3cee8;
  --sdz-border-accent: rgba(0, 196, 255, 0.6);

  --sdz-primary-hover: #3d76ff;
  --sdz-primary-active: #1743cc;
  --sdz-primary-subtle: rgba(30, 91, 255, 0.1);

  --sdz-accent-text: var(--sdz-palette-night-900);

  --sdz-text: var(--sdz-palette-grey-900);
  --sdz-text-secondary: var(--sdz-palette-grey-600);
  --sdz-text-muted: #6b7794;
  --sdz-text-inverse: var(--sdz-palette-white);
  --sdz-text-disabled: rgba(16, 26, 53, 0.38);

  --sdz-success: var(--sdz-palette-success);
  --sdz-success-text: #15803d;
  --sdz-success-subtle: rgba(22, 163, 74, 0.1);
  --sdz-success-border: rgba(22, 163, 74, 0.34);

  --sdz-warning: var(--sdz-palette-warning);
  --sdz-warning-text: #92400e;
  --sdz-warning-subtle: rgba(180, 83, 9, 0.1);
  --sdz-warning-border: rgba(180, 83, 9, 0.34);

  --sdz-danger: var(--sdz-palette-danger);
  --sdz-danger-text: #be123c;
  --sdz-danger-subtle: rgba(225, 29, 72, 0.1);
  --sdz-danger-border: rgba(225, 29, 72, 0.34);

  --sdz-info: var(--sdz-palette-info);
  --sdz-info-text: #0369a1;
  --sdz-info-subtle: rgba(2, 132, 199, 0.1);
  --sdz-info-border: rgba(2, 132, 199, 0.34);
}

/* =============================================================
   4. TYPOGRAPHIE
   Poppins -> titres / Inter -> texte (conservé de l'existant).
   ATTENTION : admin.html ne charge Inter que jusqu'à 700 et
   Poppins à partir de 600. Sur les autres pages : Poppins 400-800,
   Inter 400-600. Ne pas utiliser Inter 700 hors admin (synthétique).
   ============================================================= */
:root {
  --sdz-font-display: "Poppins", "Segoe UI", system-ui, -apple-system, sans-serif;
  --sdz-font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --sdz-font-mono: "SFMono-Regular", "JetBrains Mono", Consolas, "Liberation Mono", monospace;

  /* --- Échelle de tailles --- */
  --sdz-font-size-xs: 0.75rem;    /* 12px — meta, badges */
  --sdz-font-size-sm: 0.875rem;   /* 14px — labels, secondary */
  --sdz-font-size-md: 1rem;       /* 16px — corps, base */
  --sdz-font-size-lg: 1.125rem;   /* 18px — lead, card title */
  --sdz-font-size-xl: 1.25rem;    /* 20px — section title */
  --sdz-font-size-2xl: 1.5rem;    /* 24px — card heading */
  --sdz-font-size-3xl: 1.875rem;  /* 30px — page title */
  --sdz-font-size-4xl: 2.25rem;   /* 36px — hero */
  --sdz-font-size-5xl: 3rem;      /* 48px — hero impact */

  /* --- Graisses --- */
  --sdz-font-weight-regular: 400;
  --sdz-font-weight-medium: 500;
  --sdz-font-weight-semibold: 600;
  --sdz-font-weight-bold: 700;
  --sdz-font-weight-extrabold: 800;

  /* --- Interlignes --- */
  --sdz-line-height-tight: 1.15;    /* titres display */
  --sdz-line-height-snug: 1.3;      /* titres de section */
  --sdz-line-height-normal: 1.55;   /* corps de texte */
  --sdz-line-height-relaxed: 1.7;   /* paragraphes longs */

  /* --- Interlettrages --- */
  --sdz-letter-spacing-tight: -0.02em;  /* grands titres */
  --sdz-letter-spacing-normal: 0;
  --sdz-letter-spacing-wide: 0.02em;    /* corps large */
  --sdz-letter-spacing-wider: 0.06em;   /* labels uppercase */
}

/* =============================================================
   5. SPACING — base 4px
   Usage : padding/margin/gap UNIQUEMENT via ces tokens.
   ============================================================= */
:root {
  --sdz-space-0: 0;
  --sdz-space-1: 0.25rem;  /*  4px */
  --sdz-space-2: 0.5rem;   /*  8px */
  --sdz-space-3: 0.75rem;  /* 12px */
  --sdz-space-4: 1rem;     /* 16px */
  --sdz-space-5: 1.5rem;   /* 24px */
  --sdz-space-6: 2rem;     /* 32px */
  --sdz-space-7: 3rem;     /* 48px */
  --sdz-space-8: 4rem;     /* 64px */
  --sdz-space-9: 6rem;     /* 96px */
  --sdz-space-10: 8rem;    /* 128px */

  /* --- Rôles de mise en page --- */
  --sdz-space-gutter: var(--sdz-space-4);      /* gouttière de grille mobile */
  --sdz-space-stack: var(--sdz-space-3);       /* gap entre blocs liés */
  --sdz-space-section: var(--sdz-space-7);     /* entre deux sections */
  --sdz-control-height-sm: 2.25rem;             /* 36px */
  --sdz-control-height-md: 2.75rem;             /* 44px — cible tactile */
  --sdz-control-height-lg: 3.25rem;             /* 52px */
}

/* =============================================================
   6. BORDER RADIUS
   ============================================================= */
:root {
  --sdz-radius-none: 0;
  --sdz-radius-xs: 0.375rem;  /*  6px — chips, badges */
  --sdz-radius-sm: 0.5rem;    /*  8px */
  --sdz-radius-md: 0.75rem;   /* 12px — controls */
  --sdz-radius-lg: 1rem;      /* 16px — cards */
  --sdz-radius-xl: 1.25rem;   /* 20px — cards élevées */
  --sdz-radius-2xl: 1.5rem;   /* 24px — modales */
  --sdz-radius-full: 999px;   /* pastilles, avatars */
}

/* =============================================================
   7. SHADOWS
   Thème dark : ombres douces et basses. Le dashboard est sombre,
   une ombre lourde "flotte" mal. On accompagne d'un ring de
   bordure (--sdz-border) pour garder la séparation.
   ============================================================= */
:root {
  --sdz-shadow-none: none;
  --sdz-shadow-xs: 0 1px 2px rgba(2, 6, 23, 0.4);
  --sdz-shadow-sm: 0 2px 8px rgba(2, 6, 23, 0.45);
  --sdz-shadow-md: 0 8px 24px rgba(2, 6, 23, 0.5);
  --sdz-shadow-lg: 0 18px 48px rgba(2, 6, 23, 0.55);
  --sdz-shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  --sdz-shadow-focus: 0 0 0 3px var(--sdz-focus-ring-color);
}

[data-sdz-theme="light"] {
  /* Ombres plus douces en thème clair, tinted navy. */
  --sdz-shadow-xs: 0 1px 2px rgba(11, 19, 49, 0.06);
  --sdz-shadow-sm: 0 2px 8px rgba(11, 19, 49, 0.08);
  --sdz-shadow-md: 0 8px 24px rgba(11, 19, 49, 0.1);
  --sdz-shadow-lg: 0 18px 48px rgba(11, 19, 49, 0.12);
}

/* =============================================================
   8. MOTION
   ============================================================= */
:root {
  --sdz-duration-instant: 0ms;
  --sdz-duration-fast: 150ms;
  --sdz-duration-normal: 220ms;
  --sdz-duration-slow: 300ms;
  --sdz-duration-slower: 450ms;

  --sdz-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --sdz-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --sdz-ease-in: cubic-bezier(0.4, 0, 1, 1);
  --sdz-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Raccourcis complets : prefers toujours le token */
  --sdz-transition-fast: var(--sdz-duration-fast) var(--sdz-ease-standard);
  --sdz-transition-normal: var(--sdz-duration-normal) var(--sdz-ease-standard);
  --sdz-transition-slow: var(--sdz-duration-slow) var(--sdz-ease-standard);
}

/* Respect de la préférence système — à conserver en fin de fichier.
   Les composants doivent utiliser les tokens de transition :
   leur désactivation est alors automatique. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --sdz-duration-instant: 0ms;
    --sdz-duration-fast: 0.01ms;
    --sdz-duration-normal: 0.01ms;
    --sdz-duration-slow: 0.01ms;
    --sdz-duration-slower: 0.01ms;
  }
}

/* =============================================================
   9. Z-INDEX
   ============================================================= */
:root {
  --sdz-z-base: 0;
  --sdz-z-raised: 10;
  --sdz-z-sticky: 200;
  --sdz-z-header: 300;
  --sdz-z-overlay: 400;
  --sdz-z-modal: 500;
  --sdz-z-toast: 600;
  --sdz-z-tooltip: 700;
}

/* =============================================================
   10. BREAKPOINTS (conceptuels)
   ⚠ Les media queries ne peuvent PAS utiliser de variables CSS :
   il faut écrire la valeur en dur. Ces tokens servent à la
   documentation et à la consumption JS (window/root lookup).

   Breakpoints canoniques du projet (alignés sur l'existant) :
     xs : 360px   (très petits mobiles)
     sm : 480px
     md : 768px
     lg : 1024px
     xl : 1280px
   ============================================================= */
:root {
  --sdz-breakpoint-xs: 360px;
  --sdz-breakpoint-sm: 480px;
  --sdz-breakpoint-md: 768px;
  --sdz-breakpoint-lg: 1024px;
  --sdz-breakpoint-xl: 1280px;
}

/* =============================================================
   11. PRÉFÉRENCES UTILISATEUR
   ============================================================= */
@media (prefers-contrast: more) {
  :root {
    --sdz-border: var(--sdz-border-strong);
    --sdz-border-subtle: var(--sdz-border-strong);
    --sdz-text-muted: var(--sdz-text-secondary);
  }
}

@media (prefers-reduced-transparency: reduce) {
  :root {
    --sdz-surface: var(--sdz-palette-night-700);
    --sdz-surface-2: var(--sdz-palette-night-600);
    --sdz-surface-overlay: var(--sdz-palette-night-900);
  }
}