/* =====================================================================
   AGENCE 359 — DESIGN TOKENS
   Source of truth for the visual identity. Generated from the Figma
   library "ID_Agence359" + official logo kit + brand brief v1.0.
   Concept : « On automatise tout. Sauf un degré : vous. »
   --------------------------------------------------------------------
   Palette officielle (réfs validées) :
     Aubergine #1F1641 · Violet #D6C9FE · Dark Violet #8963FF
     Crème #FFFAF2 · Rose #E6B7E1 · Rouge #FF9393 · Orange #FFA576
     Vert #F5FF98 · Bleu #B6F3FF
   --------------------------------------------------------------------
   Layer 1 — Primitives  (raw values, never used directly in product UI)
   Layer 2 — Semantic     (role-based aliases — USE THESE in product code)
   ===================================================================== */

:root {
  /* ------------------------------------------------------------------ */
  /* 1. PRIMITIVES — COULEURS DE MARQUE (alias nommés)                   */
  /* ------------------------------------------------------------------ */
  --aubergine:   #1F1641;  /* Primaire — encre, fonds, texte */
  --violet:      #D6C9FE;  /* Violet clair — soutien doux */
  --dark-violet: #8963FF;  /* Violet vif — accent / interactif */
  --creme:       #FFFAF2;  /* Neutre de base */
  --rose:        #E6B7E1;  /* Expressif */
  --rouge:       #FF9393;  /* Expressif / alerte douce */
  --orange:      #FFA576;  /* Expressif */
  --vert:        #F5FF98;  /* Accent doux — « le degré » */
  --bleu:        #B6F3FF;  /* Expressif */
  --teal-deep:   #03323D;  /* Amorce sombre des dégradés du logo */

  /* ------------------------------------------------------------------ */
  /* 1. PRIMITIVES — NUANCIER VIOLET (Violet → Dark Violet → Aubergine) */
  /* ------------------------------------------------------------------ */
  --violet-50:  #F6F4FF;
  --violet-100: #ECE7FF;
  --violet-200: #D6C9FE;   /* « Violet » — validé */
  --violet-300: #BFA8FF;
  --violet-400: #A285FF;
  --violet-500: #8963FF;   /* « Dark Violet » — validé */
  --violet-600: #6E45E5;   /* lien accessible AA sur crème */
  --violet-700: #5430B8;
  --violet-800: #34216E;
  --violet-900: #1F1641;   /* « Aubergine » — validé */
  --violet-950: #150E2E;

  /* ------------------------------------------------------------------ */
  /* 1. PRIMITIVES — NUANCIER VERT (green-yellow)                        */
  /* ------------------------------------------------------------------ */
  --vert-100: #FBFFD6;
  --vert-200: #F5FF98;     /* « Vert » — validé */
  --vert-300: #E9FA63;
  --vert-400: #D6EC34;
  --vert-500: #B8CE16;
  --vert-600: #8E9E00;     /* variante lisible (texte/icône) */

  /* Palette expressive + variantes lisibles (texte/icône sur crème) */
  --bleu-200:   #B6F3FF;  --bleu-600:   #1E7C99;
  --rose-200:   #E6B7E1;  --rose-600:   #9C4F93;
  --rouge-200:  #FF9393;  --rouge-600:  #C2463F;
  --orange-200: #FFA576;  --orange-600: #B85F2A;

  /* Neutres chauds (teintés violet pour s'accorder à l'Aubergine) */
  --white:      #FFFFFF;
  --sable:      #F4EEE7;
  --brume:      #E9E3F4;
  --nuage:      #D9D2E6;
  --gris-400:   #ABA4C0;
  --gris-500:   #8E86A6;
  --ardoise-600:#5F5780;
  --ardoise-700:#443D63;
  --encre-800:  #2A2247;
  --encre-900:  #1F1641;
  --black:      #120B26;

  /* Statuts (accessibles AA sur crème/blanc) */
  --success-500: #1E8E5A;  --success-50: #E4F6EC;
  --warning-500: #B7791F;  --warning-50: #FBF0DA;
  --danger-500:  #C5362F;  --danger-50:  #FBE6E4;
  --info-500:    #2563A8;  --info-50:    #E4EEF9;

  /* ------------------------------------------------------------------ */
  /* 1. PRIMITIVES — TYPOGRAPHIE                                         */
  /* ------------------------------------------------------------------ */
  --font-sans: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system,
               'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, 'SF Mono',
               Menlo, Consolas, monospace;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-md:   1.125rem;
  --text-lg:   1.25rem;
  --text-xl:   1.5rem;
  --text-2xl:  clamp(1.75rem, 1.4rem + 1.6vw, 2rem);
  --text-3xl:  clamp(2.125rem, 1.6rem + 2.4vw, 2.75rem);
  --text-4xl:  clamp(2.5rem, 1.8rem + 3.2vw, 3.5rem);
  --text-5xl:  clamp(3rem, 2rem + 4.6vw, 4.75rem);

  --leading-none:    1;
  --leading-tight:   1.1;
  --leading-snug:    1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-extra:    800;

  --tracking-tight:  -0.02em;
  --tracking-snug:   -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.08em;

  /* ------------------------------------------------------------------ */
  /* 1. PRIMITIVES — ESPACEMENT (base 4 px)                              */
  /* ------------------------------------------------------------------ */
  --space-0:  0;    --space-1:  0.25rem; --space-2:  0.5rem;  --space-3:  0.75rem;
  --space-4:  1rem; --space-5:  1.25rem; --space-6:  1.5rem;  --space-7:  1.75rem;
  --space-8:  2rem; --space-10: 2.5rem;  --space-12: 3rem;    --space-16: 4rem;
  --space-20: 5rem; --space-24: 6rem;    --space-32: 8rem;

  /* ------------------------------------------------------------------ */
  /* 1. PRIMITIVES — RAYONS, OMBRES, BORDURES                            */
  /* ------------------------------------------------------------------ */
  --radius-xs: 4px;  --radius-sm: 8px;  --radius-md: 12px; --radius-lg: 18px;
  --radius-xl: 28px; --radius-2xl: 36px; --radius-pill: 999px; --radius-full: 50%;

  --shadow-xs: 0 1px 2px rgba(31,16,65,0.06);
  --shadow-sm: 0 2px 6px rgba(31,16,65,0.08);
  --shadow-md: 0 8px 24px rgba(31,16,65,0.10);
  --shadow-lg: 0 18px 48px rgba(31,16,65,0.14);
  --shadow-xl: 0 32px 70px rgba(31,16,65,0.20);
  --shadow-focus: 0 0 0 3px rgba(137,99,255,0.45);

  --border-width: 1px;

  /* ------------------------------------------------------------------ */
  /* 1. PRIMITIVES — LAYOUT, MOTION, Z-INDEX                             */
  /* ------------------------------------------------------------------ */
  --container-max: 1200px;
  --container-prose: 70ch;
  --container-gutter: clamp(1rem, 5vw, 2.5rem);

  --bp-sm: 640px; --bp-md: 768px; --bp-lg: 1024px; --bp-xl: 1280px; --bp-2xl: 1440px;

  --duration-1: 120ms; --duration-2: 200ms; --duration-3: 320ms; --duration-4: 480ms;
  --ease-standard:   cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-emphasized: cubic-bezier(0.2, 0.9, 0.1, 1);
  --ease-out:        cubic-bezier(0, 0, 0.2, 1);

  --z-base: 0; --z-sticky: 100; --z-header: 200; --z-drawer: 300;
  --z-overlay: 400; --z-modal: 500; --z-toast: 600;

  /* ================================================================== */
  /* 2. SEMANTIC — THÈME CLAIR (par défaut)                              */
  /* ================================================================== */
  --color-bg:              var(--creme);
  --color-surface:         var(--white);
  --color-surface-sunken:  var(--sable);
  --color-surface-inverse: var(--aubergine);
  --color-surface-accent:  var(--dark-violet);

  --color-border:          var(--nuage);
  --color-border-subtle:   var(--brume);
  --color-border-strong:   var(--gris-400);

  --color-text:            var(--aubergine);
  --color-text-muted:      var(--ardoise-600);
  --color-text-subtle:     var(--gris-500);
  --color-text-inverse:    var(--creme);
  --color-text-on-accent:  var(--creme);

  --color-brand:           var(--aubergine);
  --color-accent:          var(--dark-violet);
  --color-link:            var(--violet-600);
  --color-link-hover:      var(--violet-700);
  --color-focus:           var(--dark-violet);

  --color-action:          var(--aubergine);
  --color-action-hover:    var(--violet-800);
  --color-action-text:     var(--creme);
}

/* ==================================================================== */
/* 2. SEMANTIC — THÈME SOMBRE                                            */
/* ==================================================================== */
[data-theme="dark"] {
  --color-bg:              var(--violet-950);
  --color-surface:         var(--aubergine);
  --color-surface-sunken:  #18102F;
  --color-surface-inverse: var(--creme);
  --color-surface-accent:  var(--dark-violet);

  --color-border:          rgba(255,250,242,0.12);
  --color-border-subtle:   rgba(255,250,242,0.07);
  --color-border-strong:   rgba(255,250,242,0.24);

  --color-text:            var(--creme);
  --color-text-muted:      #C7BEEA;
  --color-text-subtle:     #9990C0;
  --color-text-inverse:    var(--aubergine);
  --color-text-on-accent:  var(--creme);

  --color-brand:           var(--creme);
  --color-accent:          var(--dark-violet);
  --color-link:            var(--violet-200);
  --color-link-hover:      var(--vert-200);
  --color-focus:           var(--dark-violet);

  --color-action:          var(--dark-violet);
  --color-action-hover:    var(--violet-400);
  --color-action-text:     var(--creme);

  --shadow-md: 0 8px 24px rgba(0,0,0,0.45);
  --shadow-lg: 0 18px 48px rgba(0,0,0,0.55);
}

@media (prefers-reduced-motion: reduce) {
  :root { --duration-1: 0ms; --duration-2: 0ms; --duration-3: 0ms; --duration-4: 0ms; }
}