/* ==========================================================================
   Easy Shop — tokens
   --------------------------------------------------------------------------
   Deux thèmes complets sous [data-theme] : sombre par défaut, clair pour la
   boutique éclairée. Les noms sont identiques des deux côtés — aucun composant
   ne connaît une couleur, un rayon ou une graisse en dur. Une valeur absente
   d'ici est un token à ajouter, jamais une valeur en dur dans un module CSS.

   Les familles sont variables (@fontsource-variable) : les graisses
   intermédiaires (450, 550) sont réellement disponibles, d'où une typographie
   plus légère que l'ancienne échelle 600/700.
   ========================================================================== */

:root {
  /* --- Typographie ----------------------------------------------------- */
  --font-family-display: 'Outfit Variable', 'Outfit', system-ui, sans-serif;
  --font-family-base: 'Manrope Variable', 'Manrope', system-ui, -apple-system, sans-serif;
  --font-family-mono: 'JetBrains Mono Variable', 'JetBrains Mono', ui-monospace, monospace;

  /* Échelle — display en tracking négatif, corps en graisse 400/500.
     Aucun texte d'interface au-dessus de 550 : la maquette de référence tient
     sa hiérarchie par la taille et la couleur, pas par le gras. */
  --font-body: 400 14px/1.55 var(--font-family-base);
  --font-body-sm: 400 13px/1.5 var(--font-family-base);
  --font-caption: 400 12px/1.45 var(--font-family-base);
  --font-label: 500 13px/1.35 var(--font-family-base);
  --font-button: 550 14px/1.2 var(--font-family-base);
  --font-eyebrow: 550 11px/1.35 var(--font-family-base);
  --font-title: 550 18px/1.3 var(--font-family-display);
  --font-headline: 550 24px/1.2 var(--font-family-display);
  --font-display: 600 32px/1.08 var(--font-family-display);
  --font-numeric: 400 14px/1.5 var(--font-family-mono);
  --font-numeric-strong: 500 14px/1.5 var(--font-family-mono);

  /* Montants — famille display, chiffres tabulaires imposés par le composant. */
  --font-amount: 550 16px/1.25 var(--font-family-display);
  --font-amount-lg: 600 28px/1.1 var(--font-family-display);
  --font-amount-hero: 600 clamp(30px, 3.6vw, 46px)/1.02 var(--font-family-display);

  --tracking-display: -0.035em;
  --tracking-title: -0.02em;

  /* Caisse — tactile, lisible à bout de bras. */
  --font-pos-item: 500 18px/1.3 var(--font-family-base);
  --font-pos-amount: 550 20px/1.2 var(--font-family-display);
  --font-pos-total: 600 44px/1.02 var(--font-family-display);
  --font-pos-button: 550 18px/1.2 var(--font-family-base);

  /* --- Rayons — la carte est un objet, pas un rectangle ---------------- */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 22px;
  --radius-pill: 9999px;

  /* --- Espacement — rythme 4 / 8 --------------------------------------- */
  --space-3xs: 2px;
  --space-xxs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-xxl: 48px;

  /* --- Densité --------------------------------------------------------- */
  --row-compact: 40px;
  --row-comfortable: 52px;
  --row-pos: 64px;
  --touch-min: 44px;
  --pos-touch-min: 56px;

  /* --- Mouvement ------------------------------------------------------- */
  --ease-out: cubic-bezier(0.16, 0.84, 0.44, 1);
  --transition-fast: 120ms var(--ease-out);
  --transition-base: 180ms var(--ease-out);
}

/* ==========================================================================
   Thème sombre — défaut
   ========================================================================== */
:root,
[data-theme='dark'] {
  color-scheme: dark;

  --color-primary: #4c63f0;
  --color-primary-hover: #5c72ff;
  --color-primary-pressed: #3d53e0;
  --color-primary-subtle: rgba(76, 99, 240, 0.18);
  --color-primary-border: rgba(113, 137, 255, 0.38);
  --color-primary-bright: #7189ff;
  --color-on-primary: #ffffff;
  --color-focus-ring: #7189ff;

  --color-accent: #2fa9f5;
  --color-accent-subtle: rgba(47, 169, 245, 0.16);

  --color-canvas: #070912;
  --color-surface-1: #0f1220;
  --color-surface-2: #151a2b;
  --color-surface-3: #1c2237;
  --color-surface-sunken: #0b0e19;
  --color-hairline: rgba(255, 255, 255, 0.075);
  --color-hairline-strong: rgba(255, 255, 255, 0.14);
  --color-overlay: #04060c;
  --color-glass: rgba(255, 255, 255, 0.045);
  --color-glass-strong: rgba(255, 255, 255, 0.075);

  --color-ink: #f3f5fc;
  --color-ink-muted: #a9b1c9;
  --color-ink-subtle: #737c99;
  --color-ink-disabled: #4b5471;
  --color-ink-on-dark: #f3f5fc;

  --color-success: #34d6a0;
  --color-success-subtle: rgba(52, 214, 160, 0.14);
  --color-success-hover: #29c491;
  --color-warning: #f5b14c;
  --color-warning-subtle: rgba(245, 177, 76, 0.14);
  --color-danger: #ff6e6e;
  --color-danger-subtle: rgba(255, 110, 110, 0.14);
  --color-danger-hover: #ff5757;
  --color-neutral-badge: rgba(255, 255, 255, 0.07);

  --gradient-hero: linear-gradient(135deg, #3b57f2 0%, #4c63f0 38%, #2fa9f5 100%);
  --gradient-card-a: linear-gradient(135deg, #4c63f0 0%, #2e3bb8 100%);
  --gradient-card-b: linear-gradient(135deg, #2fa9f5 0%, #2260c9 100%);
  --gradient-card-c: linear-gradient(135deg, #6f7cff 0%, #3e2fa0 100%);
  --gradient-sheen: linear-gradient(115deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 42%);
  --gradient-surface: linear-gradient(180deg, #151a2b 0%, #0f1220 100%);

  /* Halos d'ambiance du canvas — posés une fois sur <body>. */
  --glow-canvas-1: rgba(76, 99, 240, 0.2);
  --glow-canvas-2: rgba(47, 169, 245, 0.12);

  --shadow-subtle: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  --shadow-card: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 18px 40px -28px rgba(0, 0, 0, 0.9);
  --shadow-float: 0 28px 64px -24px rgba(0, 0, 0, 0.85);
  --shadow-primary: 0 22px 50px -26px rgba(76, 99, 240, 0.85);
  --scrim: rgba(4, 6, 12, 0.66);

  --chart-grid: rgba(255, 255, 255, 0.06);
  --chart-1: #4c63f0;
  --chart-2: #2fa9f5;
  --chart-3: #7189ff;
  --chart-4: #34d6a0;
  --chart-5: #a0aee8;
}

/* ==========================================================================
   Thème clair — la boutique en vitrine plein sud
   ========================================================================== */
[data-theme='light'] {
  color-scheme: light;

  --color-primary: #2f45cc;
  --color-primary-hover: #2434a6;
  --color-primary-pressed: #1d2a85;
  --color-primary-subtle: #eef0fe;
  --color-primary-border: #c7cdfa;
  --color-primary-bright: #4c63f0;
  --color-on-primary: #ffffff;
  --color-focus-ring: #2f45cc;

  --color-accent: #1183ce;
  --color-accent-subtle: #e6f2fb;

  --color-canvas: #f4f5fa;
  --color-surface-1: #ffffff;
  --color-surface-2: #fafafd;
  --color-surface-3: #f1f2f8;
  --color-surface-sunken: #edeef5;
  --color-hairline: #e5e6ef;
  --color-hairline-strong: #d2d4e2;
  --color-overlay: #10131f;
  --color-glass: rgba(15, 18, 32, 0.028);
  --color-glass-strong: rgba(15, 18, 32, 0.05);

  --color-ink: #10131f;
  --color-ink-muted: #545c74;
  --color-ink-subtle: #7c8399;
  --color-ink-disabled: #aeb4c4;
  --color-ink-on-dark: #f7f8fb;

  --color-success: #0e8f5e;
  --color-success-subtle: #e3f5ec;
  --color-success-hover: #0b7a50;
  --color-warning: #b4610a;
  --color-warning-subtle: #fdf0e1;
  --color-danger: #c0342b;
  --color-danger-subtle: #fbeae8;
  --color-danger-hover: #a32a22;
  --color-neutral-badge: #eef0f5;

  --gradient-hero: linear-gradient(135deg, #2f45cc 0%, #3d5bf5 42%, #1183ce 100%);
  --gradient-card-a: linear-gradient(135deg, #3d5bf5 0%, #2434a6 100%);
  --gradient-card-b: linear-gradient(135deg, #1183ce 0%, #1e4fb8 100%);
  --gradient-card-c: linear-gradient(135deg, #6f7cff 0%, #3a2e9e 100%);
  --gradient-sheen: linear-gradient(115deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 45%);
  --gradient-surface: linear-gradient(180deg, #ffffff 0%, #ffffff 100%);

  --glow-canvas-1: rgba(76, 99, 240, 0.1);
  --glow-canvas-2: rgba(47, 169, 245, 0.08);

  --shadow-subtle: 0 1px 2px rgba(16, 19, 31, 0.05);
  --shadow-card: 0 1px 2px rgba(16, 19, 31, 0.04);
  --shadow-float: 0 20px 48px -20px rgba(16, 19, 31, 0.28);
  --shadow-primary: 0 20px 40px -24px rgba(47, 69, 204, 0.5);
  --scrim: rgba(16, 19, 31, 0.44);

  --chart-grid: rgba(15, 18, 32, 0.08);
  --chart-1: #2f45cc;
  --chart-2: #1183ce;
  --chart-3: #6f7cff;
  --chart-4: #0e8f5e;
  --chart-5: #8c97c9;
}