/* ==========================================================================
   Yoane Market — Design tokens v1.0
   Thème clair par défaut, thème sombre via [data-theme="dark"] ou préférence OS.
   ========================================================================== */
@font-face{font-family:"Inter";src:url("../fonts/inter.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Space Grotesk";src:url("../fonts/space-grotesk-latin-600-normal.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Space Grotesk";src:url("../fonts/space-grotesk-latin-700-normal.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("../fonts/mono.woff2") format("woff2");font-weight:100 800;font-display:swap}

:root{
  /* ---- Palette primitive ---- */
  --violet-50:#f4f1ff; --violet-100:#ebe5ff; --violet-200:#d6ccff; --violet-300:#b6a4ff; --violet-400:#9174ff;
  --violet-500:#7048ff; --violet-600:#5b2ff0; --violet-700:#4c22cc; --violet-800:#3d1ca3; --violet-900:#2a1470; --violet-950:#170a40;
  --sun-300:#ffd98a; --sun-400:#ffc94d; --sun-500:#ffb21a; --sun-600:#e08f00;
  --ink-0:#ffffff; --ink-25:#fbfbfd; --ink-50:#f6f6fa; --ink-100:#eeeef4; --ink-200:#e1e1ea; --ink-300:#c9c9d6; --ink-400:#9d9db0;
  --ink-500:#6e6e84; --ink-600:#52526a; --ink-700:#3a3a50; --ink-800:#24243a; --ink-850:#1b1b2e; --ink-900:#131322; --ink-950:#0b0b16;
  --green-50:#e9fbf2; --green-500:#12b76a; --green-600:#039855; --green-700:#027a48;
  --amber-50:#fff6e5; --amber-500:#f79009; --amber-600:#dc6803; --amber-700:#b54708;
  --red-50:#fef0ef; --red-500:#f04438; --red-600:#d92d20; --red-700:#b42318;
  --blue-50:#eef4ff; --blue-500:#2e90fa; --blue-600:#1570ef; --blue-700:#175cd3;
  --mtn:#ffcc00; --mtn-ink:#1a1a1a; --orange:#ff7900; --orange-ink:#ffffff;

  /* ---- Sémantique (clair) ---- */
  --bg:var(--ink-25); --bg-subtle:var(--ink-50); --bg-muted:var(--ink-100);
  --surface:var(--ink-0); --surface-2:var(--ink-50); --surface-raised:var(--ink-0); --overlay:rgba(11,11,22,.56);
  --text:var(--ink-900); --text-2:var(--ink-600); --text-3:#6b6b80; --text-inverse:var(--ink-0);
  --border:var(--ink-200); --border-strong:var(--ink-300); --divider:var(--ink-100);
  --primary:var(--violet-600); --primary-hover:var(--violet-700); --primary-active:var(--violet-800);
  --primary-soft:var(--violet-50); --primary-soft-2:var(--violet-100); --on-primary:#fff; --primary-text:var(--violet-700);
  --accent:var(--sun-500); --accent-soft:#fff4d6; --on-accent:var(--ink-950);
  --success:var(--green-600); --success-soft:var(--green-50); --success-text:var(--green-700);
  --warning:var(--amber-500); --warning-soft:var(--amber-50); --warning-text:var(--amber-700);
  --danger:var(--red-600); --danger-soft:var(--red-50); --danger-text:var(--red-700);
  --info:var(--blue-600); --info-soft:var(--blue-50); --info-text:var(--blue-700);
  --neutral-soft:var(--ink-100); --neutral-text:var(--ink-600);
  --focus-ring:0 0 0 3px color-mix(in srgb,var(--violet-500) 45%,transparent);
  --hero-grad:radial-gradient(1200px 600px at 85% -10%,color-mix(in srgb,var(--violet-400) 35%,transparent),transparent 60%),radial-gradient(900px 500px at -10% 110%,color-mix(in srgb,var(--sun-400) 28%,transparent),transparent 60%);
  --brand-grad:linear-gradient(135deg,var(--violet-500),var(--violet-700) 55%,var(--violet-900));
  --skeleton:linear-gradient(90deg,var(--ink-100) 0%,var(--ink-50) 50%,var(--ink-100) 100%);

  /* ---- Typographie ---- */
  --font-sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-display:"Space Grotesk","Inter",system-ui,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --fs-xs:.75rem; --fs-sm:.875rem; --fs-md:1rem; --fs-lg:1.125rem; --fs-xl:1.25rem;
  --fs-2xl:clamp(1.375rem,1.2rem + .8vw,1.625rem); --fs-3xl:clamp(1.625rem,1.3rem + 1.4vw,2.125rem);
  --fs-4xl:clamp(2rem,1.5rem + 2.2vw,2.875rem); --fs-5xl:clamp(2.375rem,1.6rem + 3.6vw,4rem);
  --lh-tight:1.12; --lh-snug:1.3; --lh-body:1.6;
  --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700; --fw-black:800;
  --tracking-tight:-.025em; --tracking-wide:.06em;

  /* ---- Espacements (base 4px) ---- */
  --sp-0:0; --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem; --sp-5:1.25rem; --sp-6:1.5rem;
  --sp-8:2rem; --sp-10:2.5rem; --sp-12:3rem; --sp-16:4rem; --sp-20:5rem; --sp-24:6rem;
  --container:1240px; --container-narrow:760px; --gutter:clamp(1rem,.6rem + 2vw,2rem);
  --header-h:68px; --sidebar-w:264px;

  /* ---- Rayons ---- */
  --r-xs:6px; --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:22px; --r-2xl:28px; --r-full:999px;

  /* ---- Ombres ---- */
  --sh-xs:0 1px 2px rgba(19,19,34,.06);
  --sh-sm:0 1px 3px rgba(19,19,34,.08),0 1px 2px rgba(19,19,34,.04);
  --sh-md:0 6px 16px -4px rgba(19,19,34,.10),0 2px 6px -2px rgba(19,19,34,.06);
  --sh-lg:0 18px 40px -12px rgba(19,19,34,.18),0 6px 14px -6px rgba(19,19,34,.08);
  --sh-xl:0 30px 70px -20px rgba(23,10,64,.35);
  --sh-primary:0 10px 24px -8px color-mix(in srgb,var(--violet-600) 60%,transparent);

  /* ---- Mouvement ---- */
  --ease-out:cubic-bezier(.16,1,.3,1); --ease-in-out:cubic-bezier(.65,0,.35,1); --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --dur-fast:120ms; --dur-base:200ms; --dur-slow:360ms;

  /* ---- Z-index ---- */
  --z-sticky:20; --z-header:40; --z-drawer:60; --z-modal:70; --z-toast:90;
  color-scheme:light;
}

/* ---- Sémantique (sombre) ---- */
[data-theme="dark"]{
  --bg:var(--ink-950); --bg-subtle:var(--ink-900); --bg-muted:var(--ink-850);
  --surface:var(--ink-900); --surface-2:var(--ink-850); --surface-raised:var(--ink-850); --overlay:rgba(0,0,0,.66);
  --text:#f1f1f7; --text-2:#b9b9cc; --text-3:#9a9ab0; --text-inverse:var(--ink-950);
  --border:#2b2b42; --border-strong:#3b3b56; --divider:#212136;
  --primary:var(--violet-500); --primary-hover:var(--violet-400); --primary-active:var(--violet-300);
  --primary-soft:color-mix(in srgb,var(--violet-500) 16%,transparent); --primary-soft-2:color-mix(in srgb,var(--violet-500) 26%,transparent); --primary-text:var(--violet-300);
  --accent-soft:color-mix(in srgb,var(--sun-500) 16%,transparent);
  --success:var(--green-500); --success-soft:color-mix(in srgb,var(--green-500) 15%,transparent); --success-text:#5ee3a1;
  --warning-soft:color-mix(in srgb,var(--amber-500) 16%,transparent); --warning-text:#ffc266;
  --danger:var(--red-500); --danger-soft:color-mix(in srgb,var(--red-500) 16%,transparent); --danger-text:#ff8a80;
  --info-soft:color-mix(in srgb,var(--blue-500) 16%,transparent); --info-text:#84bcff;
  --neutral-soft:#24243a; --neutral-text:#c1c1d3;
  --skeleton:linear-gradient(90deg,#1e1e33 0%,#2a2a44 50%,#1e1e33 100%);
  --sh-xs:0 1px 2px rgba(0,0,0,.4); --sh-sm:0 1px 3px rgba(0,0,0,.5);
  --sh-md:0 8px 20px -6px rgba(0,0,0,.6); --sh-lg:0 20px 44px -12px rgba(0,0,0,.7);
  color-scheme:dark;
}
@media (prefers-reduced-motion:reduce){:root{--dur-fast:0ms;--dur-base:0ms;--dur-slow:0ms}}