/*
 * Regista Design System — Tokens
 * Source de vérité unique pour palette, typo, spacing, radius, shadows, motion.
 * Cf. docs/superpowers/specs/2026-04-29-design-system-design.md sections 6.1-6.10
 */

:root {
  /* Palette sémantique — light */
  --color-background: #FAFBFC;
  --color-foreground: #0F172A;
  --color-card: #FFFFFF;
  --color-card-foreground: #0F172A;
  --color-popover: #FFFFFF;
  --color-popover-foreground: #0F172A;
  /* Plum — primary signature du DS Regista (bordeaux violacé profond). */
  --color-primary: #6B2C5F;
  --color-primary-foreground: #FFFFFF;
  --color-secondary: #F1F5F9;
  --color-secondary-foreground: #0F172A;
  --color-muted: #F1F5F9;
  /* slate-600 (was slate-500 #64748B). Boosts contrast on muted bg from 4.34:1 to ≈7:1, satisfying WCAG AA for body copy. */
  --color-muted-foreground: #475569;
  /* Accent dérivé du plum (très clair) pour rester cohérent avec le primary. */
  --color-accent: #F5E6F1;
  --color-accent-foreground: #4A1F42;
  --color-border: #E2E8F0;
  --color-input: #E2E8F0;
  --color-ring: #6B2C5F;

  /* États (mêmes valeurs light/dark)
   * Foregrounds use dark navy (#0a1628) on success/info to satisfy WCAG AA 4.5:1 text contrast.
   * White was insufficient: white on #16A34A = 3.30:1, white on #0EA5E9 = 2.77:1. */
  --color-success: #16A34A;
  --color-success-foreground: #0a1628;
  --color-warning: #EAB308;
  --color-warning-foreground: #0a1628;
  --color-destructive: #DC2626;
  --color-destructive-foreground: #FFFFFF;
  --color-info: #0EA5E9;
  --color-info-foreground: #0a1628;

  /* Métier (palier 4 uniquement)
   * Tons assombris (Tailwind *-700 / *-600) pour atteindre WCAG AA 4.5:1 avec text-white sur les badges/chips. */
  --color-position-gk: #B45309;   /* amber-700 (was amber-500) */
  --color-position-def: #1D4ED8;  /* blue-700 (was blue-500) */
  --color-position-mid: #15803D;  /* green-700 (was green-600) */
  --color-position-fwd: #B91C1C;  /* red-700 (was red-600) */
  /* Échelle podium (Or → Argent → Bronze → Charbon) — évite le conflit visuel
   * avec les couleurs des positions (vert MID, orange GK, rouge FWD). */
  --color-rating-elite: #A16207;  /* or — amber-700 */
  --color-rating-high: #64748B;   /* argent — slate-500 (gris froid métallique) */
  --color-rating-mid: #92400E;    /* bronze — orange-800 */
  --color-rating-low: #27272A;    /* charbon — zinc-800 */

  /* Typographie
   * Display + mono read the next/font CSS variables injected by next/font/google
   * (--font-display-google, --font-mono-google in app/layout.tsx). This propagates
   * font-display:swap and the self-hosted woff2 to anything consuming the token.
   * Sans (General Sans) is loaded via Fontshare CDN <link>, so it stays as a literal name. */
  --font-display: var(--font-display-google), system-ui, -apple-system, sans-serif;
  --font-sans: "General Sans", "Inter", system-ui, -apple-system, sans-serif;
  --font-mono: var(--font-mono-google), ui-monospace, "Cascadia Code", monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: clamp(2rem, 4vw, 2.5rem);
  --text-5xl: clamp(2.5rem, 5vw, 3.5rem);

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-normal: 1.5;
  --leading-relaxed: 1.7;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.02em;

  /* Spacing — échelle 4px */
  --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;
  --space-20: 5rem;
  --space-24: 6rem;

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-full: 9999px;

  /* Shadows — light */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(15, 23, 42, 0.1);
  --shadow-glow-primary: 0 0 0 4px rgba(107, 44, 95, 0.2);

  /* Motion */
  --duration-fast: 120ms;
  --duration-normal: 200ms;
  --duration-slow: 300ms;
  --duration-slower: 500ms;
  --ease-linear: linear;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* Z-index */
  --z-base: 0;
  --z-dropdown: 1000;
  --z-sticky: 1100;
  --z-banner: 1200;
  --z-overlay: 1300;
  --z-modal: 1400;
  --z-popover: 1500;
  --z-toast: 1600;
  --z-tooltip: 1700;
}

[data-theme="dark"] {
  /* Palette sémantique — dark */
  --color-background: #0a1628;
  --color-foreground: #E2E8F0;
  --color-card: #0F1D35;
  --color-card-foreground: #E2E8F0;
  --color-popover: #0F1D35;
  --color-popover-foreground: #E2E8F0;
  /* Plum tint plus clair pour rester lisible sur le fond navy #0a1628 (ratio ≈ 6.8:1). */
  --color-primary: #C084B5;
  --color-primary-foreground: #0a1628;
  --color-secondary: #2D1B2A;
  --color-secondary-foreground: #E8C9DD;
  --color-muted: #1F1320;
  --color-muted-foreground: #B8A8B5;
  --color-accent: #3A2236;
  --color-accent-foreground: #E8C9DD;
  --color-border: #3A2236;
  --color-input: #3A2236;
  --color-ring: #C084B5;

  /* Shadows — dark */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.6);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.7);
  --shadow-glow-primary: 0 0 24px rgba(192, 132, 181, 0.35);
}