/* ==========================================================================
   SkAI Tech — Design Tokens
   Source de vérité des couleurs, typographies, espacements, rayons, ombres.
   Les couleurs de marque sont extraites des logos officiels :
   dégradé #1C4770 → #317AC1, blanc cassé #F2F2F2.
   ========================================================================== */

:root {
  /* ------------------------------------------------------------------
     Marque
     ------------------------------------------------------------------ */
  --skai-navy: #1c4770;        /* bleu marine — couleur principale sombre */
  --skai-blue: #317ac1;        /* bleu vif — couleur principale claire */
  --skai-off-white: #f2f2f2;   /* blanc cassé du logo monochrome */

  --gradient-brand: linear-gradient(135deg, var(--skai-navy) 0%, var(--skai-blue) 100%);
  --gradient-brand-hover: linear-gradient(135deg, #16385a 0%, #2765a4 100%);

  /* ------------------------------------------------------------------
     Échelle bleu (dérivée de la marque)
     500 = bleu vif du logo, 800 = bleu marine du logo
     ------------------------------------------------------------------ */
  --blue-50:  #f0f6fc;
  --blue-100: #dceaf7;
  --blue-200: #bdd8f0;
  --blue-300: #92bfe5;
  --blue-400: #5f9dd5;
  --blue-500: #317ac1;
  --blue-600: #2765a4;
  --blue-700: #215487;
  --blue-800: #1c4770;
  --blue-900: #16385a;
  --blue-950: #0e2540;

  /* ------------------------------------------------------------------
     Neutres (gris froids, teintés bleu pour rester dans l'univers ciel)
     ------------------------------------------------------------------ */
  --neutral-0:   #ffffff;
  --neutral-50:  #f7f9fb;
  --neutral-100: #eef1f5;
  --neutral-200: #e0e5ec;
  --neutral-300: #c8d1dc;
  --neutral-400: #9aa8b8;
  --neutral-500: #6e7f93;
  --neutral-600: #516174;
  --neutral-700: #3d4c5e;
  --neutral-800: #2a3747;
  --neutral-900: #1b2532;
  --neutral-950: #101823;

  /* ------------------------------------------------------------------
     Sémantiques
     ------------------------------------------------------------------ */
  --success-500: #2e9e6b;
  --success-100: #dcf3e8;
  --success-700: #1f7a50;

  --warning-500: #c8811a;
  --warning-100: #fdf0da;
  --warning-700: #96600f;

  --danger-500: #d64545;
  --danger-100: #fbe3e3;
  --danger-700: #a83232;

  --info-500: var(--blue-500);
  --info-100: var(--blue-100);
  --info-700: var(--blue-700);

  /* ------------------------------------------------------------------
     Rôles — thème clair (défaut)
     Les composants n'utilisent QUE ces variables de rôle,
     jamais les échelles brutes : le dark mode ne surcharge que ce bloc.
     ------------------------------------------------------------------ */
  --bg-page: var(--neutral-50);
  --bg-surface: var(--neutral-0);
  --bg-surface-raised: var(--neutral-0);
  --bg-subtle: var(--neutral-100);
  --bg-inset: var(--neutral-100);
  --bg-brand: var(--gradient-brand);
  --bg-header: var(--gradient-brand);

  --text-primary: var(--neutral-900);
  --text-secondary: var(--neutral-600);
  --text-muted: var(--neutral-500);
  --text-on-brand: #ffffff;
  --text-link: var(--blue-700);
  --text-link-hover: var(--blue-800);

  --border-default: var(--neutral-200);
  --border-strong: var(--neutral-300);
  --border-focus: var(--blue-500);

  --ring-focus: 0 0 0 3px rgba(49, 122, 193, 0.35);

  /* ------------------------------------------------------------------
     Typographie
     Inter si disponible (à auto-héberger, pas de CDN), sinon la pile système.
     ------------------------------------------------------------------ */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;

  --text-xs: 0.75rem;    /* 12px — mentions, horodatages */
  --text-sm: 0.875rem;   /* 14px — texte secondaire, tableaux */
  --text-base: 1rem;     /* 16px — corps de texte */
  --text-lg: 1.125rem;   /* 18px — intro, sous-titres */
  --text-xl: 1.375rem;   /* 22px — titres de section */
  --text-2xl: 1.75rem;   /* 28px — titres de page */
  --text-3xl: 2.25rem;   /* 36px — héros (rare) */

  --font-regular: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;

  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  /* ------------------------------------------------------------------
     Espacement (base 4px)
     ------------------------------------------------------------------ */
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.5rem;    /* 24px */
  --space-6: 2rem;      /* 32px */
  --space-7: 3rem;      /* 48px */
  --space-8: 4rem;      /* 64px */

  /* ------------------------------------------------------------------
     Rayons — l'identité du logo est très arrondie, on l'assume
     ------------------------------------------------------------------ */
  --radius-sm: 6px;     /* badges, éléments compacts */
  --radius-md: 10px;    /* boutons, champs */
  --radius-lg: 16px;    /* cartes, panneaux */
  --radius-xl: 24px;    /* modales, héros */
  --radius-full: 9999px;

  /* ------------------------------------------------------------------
     Ombres (teintées du bleu marine de la marque)
     ------------------------------------------------------------------ */
  --shadow-sm: 0 1px 2px rgba(28, 71, 112, 0.08);
  --shadow-md: 0 2px 8px rgba(28, 71, 112, 0.1), 0 1px 2px rgba(28, 71, 112, 0.06);
  --shadow-lg: 0 8px 24px rgba(28, 71, 112, 0.14), 0 2px 6px rgba(28, 71, 112, 0.08);
  --shadow-brand: 0 4px 14px rgba(49, 122, 193, 0.35);

  /* ------------------------------------------------------------------
     Mouvement
     Sobre et discret : le mouvement accompagne la lecture, il ne se
     remarque pas. Entrées ≤ 550ms, interactions ≤ 200ms, ease-out doux.
     ------------------------------------------------------------------ */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --transition-fast: 120ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 350ms var(--ease-out);
  --duration-entrance: 550ms;
  --stagger-step: 70ms;

  /* ------------------------------------------------------------------
     Décor de fond — halos et formes floues (voir .bg-decor)
     Basse opacité obligatoire : le décor est une ambiance, pas un motif.
     ------------------------------------------------------------------ */
  --decor-halo-1: rgba(49, 122, 193, 0.1);
  --decor-halo-2: rgba(28, 71, 112, 0.08);
  --decor-halo-3: rgba(95, 157, 213, 0.1);
  --decor-shape-opacity: 0.06;

  /* ------------------------------------------------------------------
     Divers
     ------------------------------------------------------------------ */
  --container-max: 72rem;      /* 1152px */
  --container-narrow: 26rem;   /* 416px — formulaires de login */
}

/* ==========================================================================
   Thème sombre
   Activé via <html data-theme="dark"> ou la préférence système.
   ========================================================================== */

[data-theme="dark"] {
  --bg-page: var(--neutral-950);
  --bg-surface: var(--neutral-900);
  --bg-surface-raised: var(--neutral-800);
  --bg-subtle: var(--neutral-800);
  --bg-inset: var(--neutral-950);
  --bg-header: linear-gradient(135deg, var(--blue-950) 0%, var(--blue-800) 100%);

  --text-primary: var(--skai-off-white);
  --text-secondary: var(--neutral-300);
  --text-muted: var(--neutral-400);
  --text-link: var(--blue-300);
  --text-link-hover: var(--blue-200);

  --border-default: var(--neutral-800);
  --border-strong: var(--neutral-700);

  --ring-focus: 0 0 0 3px rgba(95, 157, 213, 0.4);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.25);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.3);

  --success-100: rgba(46, 158, 107, 0.18);
  --success-700: #5ecf9b;
  --warning-100: rgba(200, 129, 26, 0.18);
  --warning-700: #e8ab55;
  --danger-100: rgba(214, 69, 69, 0.18);
  --danger-700: #ef8080;
  --info-100: rgba(49, 122, 193, 0.2);
  --info-700: var(--blue-300);

  --decor-halo-1: rgba(49, 122, 193, 0.16);
  --decor-halo-2: rgba(95, 157, 213, 0.1);
  --decor-halo-3: rgba(28, 71, 112, 0.35);
  --decor-shape-opacity: 0.12;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-page: var(--neutral-950);
    --bg-surface: var(--neutral-900);
    --bg-surface-raised: var(--neutral-800);
    --bg-subtle: var(--neutral-800);
    --bg-inset: var(--neutral-950);
    --bg-header: linear-gradient(135deg, var(--blue-950) 0%, var(--blue-800) 100%);

    --text-primary: var(--skai-off-white);
    --text-secondary: var(--neutral-300);
    --text-muted: var(--neutral-400);
    --text-link: var(--blue-300);
    --text-link-hover: var(--blue-200);

    --border-default: var(--neutral-800);
    --border-strong: var(--neutral-700);

    --ring-focus: 0 0 0 3px rgba(95, 157, 213, 0.4);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.25);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.3);

    --success-100: rgba(46, 158, 107, 0.18);
    --success-700: #5ecf9b;
    --warning-100: rgba(200, 129, 26, 0.18);
    --warning-700: #e8ab55;
    --danger-100: rgba(214, 69, 69, 0.18);
    --danger-700: #ef8080;
    --info-100: rgba(49, 122, 193, 0.2);
    --info-700: var(--blue-300);

    --decor-halo-1: rgba(49, 122, 193, 0.16);
    --decor-halo-2: rgba(95, 157, 213, 0.1);
    --decor-halo-3: rgba(28, 71, 112, 0.35);
    --decor-shape-opacity: 0.12;
  }
}