/* Jetons de design — copie EXACTE de shop.audiofly.ch/static/css/_tokens.css (relevé du 2026-10-15).
   Ne pas modifier ici : si le shop évolue, recopier son fichier. Référence : _lab/references/shop/css/. */

:root {
  color-scheme: light;

  /* ---- Brand gradient (blue → violet → magenta) ---- */
  --c1: #29aded;
  --c2: #9345f4;
  --c3: #c72ef3;
  --grad: linear-gradient(120deg, #29aded 0%, #9345f4 52%, #c72ef3 100%);
  /* Darker gradient for surfaces carrying white text/icons — every stop
     keeps >=4.5:1 white contrast (WCAG AA). Use for filled buttons/badges. */
  --grad-strong: linear-gradient(120deg, #1877b8 0%, #7a2fd6 52%, #a021b8 100%);

  /* ---- Surfaces & ink (light) ---- */
  --color-bg: #ffffff;
  --color-bg-alt: #f5f6f9;
  --color-bg-alt2: #eceef3;
  --color-surface: #ffffff;
  --color-fg: #151515;
  --color-muted: #6d6e72;
  --color-muted-2: #9a9ba1;
  --color-border: rgba(21, 25, 40, 0.1);
  --color-border-strong: rgba(21, 25, 40, 0.15);

  /* Admin top bar — stays dark in both themes (white ink on top). */
  --admin-topbar-bg: #151515;

  /* ---- Semantic primary (solid fallbacks of the gradient) ---- */
  --color-primary: #8a3df0;
  --color-primary-dark: #6f28d0;
  --color-primary-light: #f1e9fe;
  --color-accent: #1d9fe0;
  /* Button fill — decoupled from the link/text primary so it stays
     white-legible in both themes. */
  --color-primary-btn: #8a3df0;
  --color-primary-btn-hover: #6f28d0;

  /* ---- Pro (kept distinct from primary — teal bridges the blue) ---- */
  --color-pro: #0f766e;
  --color-pro-bg: #ecfdfa;

  /* ---- Status ---- */
  --color-danger: #dc2626;
  --color-danger-bg: #fef2f2;
  --color-success: #16a34a;
  --color-success-bg: #e7f6ed;
  --color-warning: #b45309;
  --color-warning-bg: #fef3c7;
  --color-info: #0369a1;
  --color-info-bg: #e0f2fe;
  /* Ink for text on the flash tints. Light theme: dark ink on the light
     tint. Both -fg and the flash bg are overridden per theme below so
     notifications stay legible in dark mode too. */
  --color-danger-fg: #991b1b;
  --color-success-fg: #14532d;
  --color-warning-fg: #92400e;
  --color-info-fg: #075985;
  /* Flash-message backgrounds (light theme = the status tints). Dedicated
     tokens so the notification look can go dark without disturbing badges,
     cart and catalog which keep the light status tints. */
  --flash-danger-bg: var(--color-danger-bg);
  --flash-success-bg: var(--color-success-bg);
  --flash-warning-bg: var(--color-warning-bg);
  --flash-info-bg: var(--color-info-bg);

  /* ---- Spacing — 4px scale ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 56px;
  --space-9: 64px;
  --space-10: 80px;

  /* ---- Radii (v4 softer, pill buttons) ---- */
  --radius-sm: 8px;
  --radius: 11px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* ---- Typography ---- */
  --font-base: "Inter", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont,
    Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Jost", "Century Gothic", "URW Gothic", "Futura",
    "Trebuchet MS", var(--font-base);
  --fs-12: 0.75rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-32: 2rem;
  --fs-48: 3rem;
  --lh-tight: 1.2;
  --lh-base: 1.6;

  /* ---- Shadows (v4 lifted) ---- */
  --shadow-sm: 0 1px 2px rgba(21, 25, 40, 0.05);
  --shadow: 0 1px 2px rgba(21, 25, 40, 0.05), 0 14px 34px -14px rgba(21, 25, 40, 0.14);
  --shadow-lg: 0 3px 8px rgba(21, 25, 40, 0.07), 0 26px 56px -20px rgba(21, 25, 40, 0.22);

  /* ---- Motion ---- */
  --transition: 180ms ease-out;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

  /* ---- Layout ---- */
  --container-max: 1240px;
  --header-height: 78px;
}