/* ============================================================================
   PULSAR — Design Tokens v0.1
   À copier dans le projet final comme styles.css ou tokens.css.
   Toutes les couleurs sont exprimées en oklch + hex de fallback.
   ============================================================================ */

@import url("https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap");

/* ----------------------------------------------------------------------------
   1. NEUTRALS — base partagée clair / sombre
   Gris cool, undertone légèrement froid (chroma ~0.005, hue 250°),
   pour donner un sentiment "cockpit / tech" sans virer au bleu glacial.
   ---------------------------------------------------------------------------- */

:root {
  /* Stops neutres en oklch, équidistants en lightness */
  --neutral-0:   oklch(1 0 0);                  /* #FFFFFF */
  --neutral-25:  oklch(0.987 0.003 250);        /* #FAFAFB */
  --neutral-50:  oklch(0.974 0.004 250);        /* #F5F5F7 */
  --neutral-100: oklch(0.952 0.005 250);        /* #EDEDF0 */
  --neutral-150: oklch(0.925 0.006 250);        /* #E3E3E8 */
  --neutral-200: oklch(0.890 0.006 250);        /* #D4D4DB */
  --neutral-300: oklch(0.812 0.007 250);        /* #B5B5BD */
  --neutral-400: oklch(0.688 0.008 250);        /* #8E8E97 */
  --neutral-500: oklch(0.572 0.009 250);        /* #6D6D77 */
  --neutral-600: oklch(0.470 0.010 250);        /* #525258 */
  --neutral-700: oklch(0.378 0.010 250);        /* #3E3E44 */
  --neutral-800: oklch(0.270 0.010 250);        /* #2A2A2F */
  --neutral-850: oklch(0.215 0.010 250);        /* #1F1F23 */
  --neutral-900: oklch(0.170 0.010 250);        /* #18181B */
  --neutral-950: oklch(0.130 0.010 250);        /* #0F0F12 */
  --neutral-975: oklch(0.090 0.008 250);        /* #08080B */

  /* ------------------------------------------------------------------------
     2. ACCENT PRINCIPAL PULSAR (par défaut, surchargé par data-accent="X")
     Trois options proposées en parallèle :
       - cosmic  : indigo violet, métaphore étoile à neutrons
       - signal  : cyan radio, très tech
       - azure   : bleu Vercel, intemporel
     Variables --pulsar-* utilisées partout dans les composants.
     ------------------------------------------------------------------------ */

  /* -- Cosmic indigo (défaut) ------------------------------------------- */
  --cosmic-50:  oklch(0.965 0.018 275);
  --cosmic-100: oklch(0.930 0.038 275);
  --cosmic-200: oklch(0.870 0.075 275);
  --cosmic-300: oklch(0.780 0.130 275);
  --cosmic-400: oklch(0.680 0.180 275);
  --cosmic-500: oklch(0.580 0.220 275);  /* #5B5BD6 ~ */
  --cosmic-600: oklch(0.510 0.225 275);  /* primary */
  --cosmic-700: oklch(0.440 0.205 275);
  --cosmic-800: oklch(0.355 0.165 275);
  --cosmic-900: oklch(0.275 0.115 275);
  --cosmic-950: oklch(0.205 0.080 275);

  /* -- Signal cyan ------------------------------------------------------ */
  --signal-50:  oklch(0.970 0.020 210);
  --signal-100: oklch(0.935 0.045 210);
  --signal-200: oklch(0.875 0.080 210);
  --signal-300: oklch(0.790 0.115 210);
  --signal-400: oklch(0.700 0.130 210);
  --signal-500: oklch(0.620 0.135 210);
  --signal-600: oklch(0.545 0.130 215);  /* primary */
  --signal-700: oklch(0.460 0.115 220);
  --signal-800: oklch(0.370 0.090 220);
  --signal-900: oklch(0.285 0.065 220);
  --signal-950: oklch(0.210 0.045 220);

  /* -- Azure deep ------------------------------------------------------- */
  --azure-50:   oklch(0.965 0.020 245);
  --azure-100:  oklch(0.925 0.045 245);
  --azure-200:  oklch(0.860 0.085 245);
  --azure-300:  oklch(0.770 0.135 245);
  --azure-400:  oklch(0.660 0.170 250);
  --azure-500:  oklch(0.570 0.185 252);
  --azure-600:  oklch(0.500 0.195 254);  /* primary */
  --azure-700:  oklch(0.430 0.175 254);
  --azure-800:  oklch(0.345 0.140 254);
  --azure-900:  oklch(0.265 0.100 254);
  --azure-950:  oklch(0.195 0.070 254);

  /* -- Sage clair (D) — vert comptable doux, reposant, métier alimentaire
     sans virer "bio criard". Chroma volontairement bas. ------------------ */
  --sage-50:   oklch(0.965 0.018 158);
  --sage-100:  oklch(0.930 0.040 158);
  --sage-200:  oklch(0.870 0.060 158);
  --sage-300:  oklch(0.780 0.075 158);
  --sage-400:  oklch(0.680 0.085 160);
  --sage-500:  oklch(0.590 0.085 162);
  --sage-600:  oklch(0.510 0.085 163);  /* primary */
  --sage-700:  oklch(0.435 0.080 165);
  --sage-800:  oklch(0.355 0.065 167);
  --sage-900:  oklch(0.275 0.045 168);
  --sage-950:  oklch(0.205 0.030 168);

  /* -- Sauge profond (E) — version plus dense et plus saturée du sage.
     Plus de présence sans virer au vert vif. --------------------------- */
  --deepsage-50:   oklch(0.960 0.025 155);
  --deepsage-100:  oklch(0.920 0.055 155);
  --deepsage-200:  oklch(0.855 0.090 155);
  --deepsage-300:  oklch(0.760 0.115 158);
  --deepsage-400:  oklch(0.650 0.130 160);
  --deepsage-500:  oklch(0.555 0.135 162);
  --deepsage-600:  oklch(0.475 0.130 163);  /* primary */
  --deepsage-700:  oklch(0.400 0.115 165);
  --deepsage-800:  oklch(0.320 0.090 167);
  --deepsage-900:  oklch(0.250 0.065 168);
  --deepsage-950:  oklch(0.185 0.045 170);

  /* ------------------------------------------------------------------------
     3. SÉMANTIQUE (succès / avertissement / erreur / info)
     Chroma calibré pour rester lisible AA sur fond clair et sombre.
     ------------------------------------------------------------------------ */
  --success-50:  oklch(0.962 0.040 155);
  --success-100: oklch(0.910 0.080 155);
  --success-500: oklch(0.605 0.150 155);   /* #1F8A5B ~ */
  --success-600: oklch(0.535 0.155 155);
  --success-700: oklch(0.465 0.140 155);

  --warning-50:  oklch(0.970 0.040 75);
  --warning-100: oklch(0.920 0.090 80);
  --warning-500: oklch(0.745 0.165 75);    /* amber */
  --warning-600: oklch(0.680 0.175 65);    /* darker for text */
  --warning-700: oklch(0.575 0.165 55);

  --danger-50:   oklch(0.962 0.030 25);
  --danger-100:  oklch(0.910 0.075 25);
  --danger-500:  oklch(0.620 0.215 27);
  --danger-600:  oklch(0.550 0.225 27);
  --danger-700:  oklch(0.475 0.205 27);

  --info-50:     oklch(0.965 0.025 230);
  --info-100:    oklch(0.920 0.060 230);
  --info-500:    oklch(0.640 0.145 230);
  --info-600:    oklch(0.560 0.155 232);
  --info-700:    oklch(0.480 0.140 234);

  /* ------------------------------------------------------------------------
     4. COULEURS CADENCIER (9) — style étiquettes Linear/GitHub
     Toutes équidistantes en lightness (0.62) et chroma (0.13),
     hue espacée pour distinction maximale. La pastille est utilisée
     comme background à 100%, les badges utilisent le mix avec neutral.
     Mapping aux rayons du magasin (cf. brief 3.b) :
       rouille → Boucherie
       ambre  → Charcuterie
       indigo → Poissonnerie
       azur   → Crèmerie
       olive  → Épicerie
       jade   → Fruits & Légumes
       violet → Alcool
       sable  → Boulangerie  (9e couleur, pâle, farine/pain)
       rose   → Emballages / Entretien
     ------------------------------------------------------------------------ */
  --cad-rouille:  oklch(0.620 0.130 25);   /* terre cuite */
  --cad-ambre:    oklch(0.700 0.130 65);   /* bronze chaud */
  --cad-olive:    oklch(0.620 0.105 115);  /* olive */
  --cad-jade:     oklch(0.620 0.110 165);  /* jade */
  --cad-azur:     oklch(0.620 0.110 220);  /* azur */
  --cad-indigo:   oklch(0.620 0.155 275);  /* indigo */
  --cad-violet:   oklch(0.620 0.150 310);  /* violet */
  --cad-rose:     oklch(0.620 0.140 350);  /* rose poudré */
  --cad-sable:    oklch(0.760 0.060 85);   /* sable / or pâle, farine */

  /* ------------------------------------------------------------------------
     5. PALETTE INVENTAIRE — 2 options proposées
     Surcharge appliquée via [data-inventory-palette="cool" | "kraft"]
     ------------------------------------------------------------------------ */

  /* Option A — gris cool industriel + accent vert sage */
  --inv-cool-bg-1:    oklch(0.225 0.012 240);
  --inv-cool-bg-2:    oklch(0.275 0.015 240);
  --inv-cool-bg-3:    oklch(0.325 0.018 240);
  --inv-cool-border:  oklch(0.380 0.020 240);
  --inv-cool-text:    oklch(0.940 0.010 240);
  --inv-cool-muted:   oklch(0.700 0.015 240);
  --inv-cool-accent:  oklch(0.660 0.090 155);  /* sage green */
  --inv-cool-accent-dim: oklch(0.475 0.080 155);

  /* Option B — vert kraft / olive sombre + accent crème */
  --inv-kraft-bg-1:   oklch(0.245 0.025 105);
  --inv-kraft-bg-2:   oklch(0.295 0.030 105);
  --inv-kraft-bg-3:   oklch(0.345 0.035 105);
  --inv-kraft-border: oklch(0.400 0.040 105);
  --inv-kraft-text:   oklch(0.945 0.025 90);   /* crème */
  --inv-kraft-muted:  oklch(0.730 0.030 95);
  --inv-kraft-accent: oklch(0.860 0.075 85);   /* crème lumineux */
  --inv-kraft-accent-dim: oklch(0.620 0.060 90);

  /* ------------------------------------------------------------------------
     6. CODE COULEUR BL (orange = pré-rempli, rouge = écart, vert = validé)
     ------------------------------------------------------------------------ */
  --bl-prefilled-bg:   oklch(0.965 0.035 75);
  --bl-prefilled-bar:  oklch(0.745 0.165 75);
  --bl-discount-bg:    oklch(0.965 0.030 25);
  --bl-discount-bar:   oklch(0.620 0.215 27);
  --bl-validated-bg:   oklch(0.962 0.040 155);
  --bl-validated-bar:  oklch(0.605 0.150 155);

  /* ------------------------------------------------------------------------
     7. TYPOGRAPHIE
     Geist Sans pour l'interface, Geist Mono pour références techniques.
     Échelle modulaire (ratio ~1.125, base 14px).
     ------------------------------------------------------------------------ */
  --font-sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono: "Geist Mono", "JetBrains Mono", "SF Mono", Menlo, monospace;

  --text-2xs: 0.6875rem;   /* 11px — badges, mono refs */
  --text-xs:  0.75rem;     /* 12px — captions, table dense */
  --text-sm:  0.8125rem;   /* 13px — table, inputs default */
  --text-base:0.875rem;    /* 14px — body */
  --text-md:  0.9375rem;   /* 15px — emphasis body */
  --text-lg:  1.0625rem;   /* 17px — section subtitle */
  --text-xl:  1.25rem;     /* 20px — h4 */
  --text-2xl: 1.5rem;      /* 24px — h3 */
  --text-3xl: 1.875rem;    /* 30px — h2 */
  --text-4xl: 2.375rem;    /* 38px — h1 */
  --text-5xl: 3rem;        /* 48px — kiosque article */

  --leading-tight: 1.2;
  --leading-snug: 1.35;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  --tracking-tight: -0.018em;
  --tracking-normal: -0.005em;
  --tracking-wide: 0.02em;
  --tracking-caps: 0.06em;

  /* ------------------------------------------------------------------------
     8. ESPACEMENTS, RAYONS, OMBRES
     ------------------------------------------------------------------------ */
  --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-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  --radius-xs: 3px;
  --radius-sm: 5px;
  --radius-md: 7px;
  --radius-lg: 10px;
  --radius-xl: 14px;
  --radius-2xl: 20px;
  --radius-full: 9999px;

  /* Ombres calibrées clair (les versions dark sont redéfinies plus bas) */
  --shadow-xs: 0 1px 2px rgba(15, 15, 18, 0.04);
  --shadow-sm: 0 1px 3px rgba(15, 15, 18, 0.06), 0 1px 2px rgba(15, 15, 18, 0.04);
  --shadow-md: 0 4px 12px rgba(15, 15, 18, 0.07), 0 1px 3px rgba(15, 15, 18, 0.05);
  --shadow-lg: 0 12px 28px rgba(15, 15, 18, 0.10), 0 4px 8px rgba(15, 15, 18, 0.06);
  --shadow-xl: 0 24px 56px rgba(15, 15, 18, 0.16), 0 8px 16px rgba(15, 15, 18, 0.08);
  --shadow-focus: 0 0 0 3px color-mix(in oklch, var(--pulsar-500) 25%, transparent);

  /* ------------------------------------------------------------------------
     9. TOKENS SÉMANTIQUES (thème CLAIR par défaut)
     Ce sont les variables qu'on consomme dans les composants.
     ------------------------------------------------------------------------ */
  --bg-app:        var(--neutral-50);
  --bg-canvas:     var(--neutral-0);
  --bg-elevated:   var(--neutral-0);
  --bg-subtle:     var(--neutral-50);
  --bg-muted:      var(--neutral-100);
  --bg-hover:      var(--neutral-100);
  --bg-active:     var(--neutral-150);

  --border-subtle: var(--neutral-100);
  --border-default:var(--neutral-200);
  --border-strong: var(--neutral-300);

  --text-primary:  var(--neutral-900);
  --text-secondary:var(--neutral-700);
  --text-tertiary: var(--neutral-500);
  --text-quaternary:var(--neutral-400);
  --text-disabled: var(--neutral-300);
  --text-on-accent:var(--neutral-0);

  /* Bind accent par défaut sur Azure deep (C) — choix validé Julien
     Les autres accents (cosmic / signal / sage / deepsage) restent
     disponibles via [data-accent="..."]. */
  --pulsar-50:  var(--azure-50);
  --pulsar-100: var(--azure-100);
  --pulsar-200: var(--azure-200);
  --pulsar-300: var(--azure-300);
  --pulsar-400: var(--azure-400);
  --pulsar-500: var(--azure-500);
  --pulsar-600: var(--azure-600);
  --pulsar-700: var(--azure-700);
  --pulsar-800: var(--azure-800);
  --pulsar-900: var(--azure-900);
  --pulsar-950: var(--azure-950);
}

/* ----------------------------------------------------------------------------
   10. THÈME SOMBRE
   ---------------------------------------------------------------------------- */
[data-theme="dark"] {
  --bg-app:        var(--neutral-975);
  --bg-canvas:     var(--neutral-950);
  --bg-elevated:   var(--neutral-900);
  --bg-subtle:     var(--neutral-950);
  --bg-muted:      var(--neutral-850);
  --bg-hover:      var(--neutral-850);
  --bg-active:     var(--neutral-800);

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

  --text-primary:  var(--neutral-25);
  --text-secondary:var(--neutral-200);
  --text-tertiary:  oklch(0.730 0.008 250); /* A11y dark: était var(--neutral-400) — conforme, renforcé */
  --text-quaternary:oklch(0.660 0.009 250); /* A11y dark: était var(--neutral-500) ~3.6:1, désormais WCAG AA */
  --text-disabled: var(--neutral-700);
  /* DETTE A11y : contraste mode clair non audité — --text-quaternary ~3.3:1 sur bg-canvas.
     À traiter au Jalon 10. L'amendement ci-dessus corrige uniquement le sombre. */

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.40);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.50), 0 1px 2px rgba(0, 0, 0, 0.40);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.55), 0 2px 4px rgba(0, 0, 0, 0.40);
  --shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.60), 0 4px 8px rgba(0, 0, 0, 0.40);
  --shadow-xl: 0 24px 56px rgba(0, 0, 0, 0.65), 0 8px 16px rgba(0, 0, 0, 0.45);

  /* BL color code en sombre : on bascule sur fonds teint\u00e9s sombres,
     le texte primaire (clair) reste lisible. La barre verticale conserve
     la m\u00eame chromie pour servir de rep\u00e8re. */
  --bl-prefilled-bg:   oklch(0.265 0.045 75);
  --bl-prefilled-bar:  oklch(0.745 0.165 75);
  --bl-discount-bg:    oklch(0.275 0.060 25);
  --bl-discount-bar:   oklch(0.660 0.190 27);
  --bl-validated-bg:   oklch(0.265 0.055 155);
  --bl-validated-bar:  oklch(0.640 0.150 155);

  /* Pour dark mode, on remonte d'un cran le primary (plus lumineux) */
  --pulsar-500: var(--azure-400);
  --pulsar-600: var(--azure-500);
}

/* Cosmic indigo (A) — accent opt-in, conservé pour comparaison */
[data-accent="cosmic"] {
  --pulsar-50:  var(--cosmic-50);
  --pulsar-100: var(--cosmic-100);
  --pulsar-200: var(--cosmic-200);
  --pulsar-300: var(--cosmic-300);
  --pulsar-400: var(--cosmic-400);
  --pulsar-500: var(--cosmic-500);
  --pulsar-600: var(--cosmic-600);
  --pulsar-700: var(--cosmic-700);
  --pulsar-800: var(--cosmic-800);
  --pulsar-900: var(--cosmic-900);
  --pulsar-950: var(--cosmic-950);
}
[data-accent="cosmic"][data-theme="dark"] {
  --pulsar-500: var(--cosmic-400);
  --pulsar-600: var(--cosmic-500);
}

/* Surcharges accent */
[data-accent="signal"] {
  --pulsar-50:  var(--signal-50);
  --pulsar-100: var(--signal-100);
  --pulsar-200: var(--signal-200);
  --pulsar-300: var(--signal-300);
  --pulsar-400: var(--signal-400);
  --pulsar-500: var(--signal-500);
  --pulsar-600: var(--signal-600);
  --pulsar-700: var(--signal-700);
  --pulsar-800: var(--signal-800);
  --pulsar-900: var(--signal-900);
  --pulsar-950: var(--signal-950);
}
[data-accent="signal"][data-theme="dark"] {
  --pulsar-500: var(--signal-400);
  --pulsar-600: var(--signal-500);
}

[data-accent="azure"] {
  --pulsar-50:  var(--azure-50);
  --pulsar-100: var(--azure-100);
  --pulsar-200: var(--azure-200);
  --pulsar-300: var(--azure-300);
  --pulsar-400: var(--azure-400);
  --pulsar-500: var(--azure-500);
  --pulsar-600: var(--azure-600);
  --pulsar-700: var(--azure-700);
  --pulsar-800: var(--azure-800);
  --pulsar-900: var(--azure-900);
  --pulsar-950: var(--azure-950);
}
[data-accent="azure"][data-theme="dark"] {
  --pulsar-500: var(--azure-400);
  --pulsar-600: var(--azure-500);
}

[data-accent="sage"] {
  --pulsar-50:  var(--sage-50);
  --pulsar-100: var(--sage-100);
  --pulsar-200: var(--sage-200);
  --pulsar-300: var(--sage-300);
  --pulsar-400: var(--sage-400);
  --pulsar-500: var(--sage-500);
  --pulsar-600: var(--sage-600);
  --pulsar-700: var(--sage-700);
  --pulsar-800: var(--sage-800);
  --pulsar-900: var(--sage-900);
  --pulsar-950: var(--sage-950);
}
[data-accent="sage"][data-theme="dark"] {
  --pulsar-500: var(--sage-400);
  --pulsar-600: var(--sage-500);
}

[data-accent="deepsage"] {
  --pulsar-50:  var(--deepsage-50);
  --pulsar-100: var(--deepsage-100);
  --pulsar-200: var(--deepsage-200);
  --pulsar-300: var(--deepsage-300);
  --pulsar-400: var(--deepsage-400);
  --pulsar-500: var(--deepsage-500);
  --pulsar-600: var(--deepsage-600);
  --pulsar-700: var(--deepsage-700);
  --pulsar-800: var(--deepsage-800);
  --pulsar-900: var(--deepsage-900);
  --pulsar-950: var(--deepsage-950);
}
[data-accent="deepsage"][data-theme="dark"] {
  --pulsar-500: var(--deepsage-400);
  --pulsar-600: var(--deepsage-500);
}

/* ----------------------------------------------------------------------------
   11. BASE TYPOGRAPHIE
   ---------------------------------------------------------------------------- */
.pulsar-root {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  background: var(--bg-app);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: var(--tracking-normal);
}

.font-mono { font-family: var(--font-mono); font-feature-settings: "zero", "ss01"; }