/*
  tokens.css — Prevancy Portal
  Design tokens: palette OKLCH, typographie fluide, espacement, mouvement.
  Direction : "atelier nocturne" — labo personnel de micro-projets.
*/

:root {
  color-scheme: dark;

  /* ---------- Surfaces ---------- */
  --color-bg: oklch(15% 0.015 260);
  --color-bg-deep: oklch(12% 0.014 260);
  --color-surface-1: oklch(19% 0.017 258);
  --color-surface-2: oklch(23% 0.019 258);
  --color-surface-3: oklch(28% 0.021 256);
  --color-border: oklch(34% 0.02 258);
  --color-border-strong: oklch(44% 0.026 258);

  /* ---------- Texte ---------- */
  --color-text: oklch(95% 0.006 95);
  --color-text-muted: oklch(74% 0.015 250);
  --color-text-faint: oklch(63% 0.017 255);

  /* ---------- Accent principal : cuivre / ambre chaud ---------- */
  --color-accent: oklch(75% 0.14 70);
  --color-accent-strong: oklch(81% 0.15 68);
  --color-accent-soft: oklch(75% 0.14 70 / 14%);
  --color-accent-border: oklch(75% 0.14 70 / 38%);
  --color-on-accent: oklch(17% 0.02 70);

  /* ---------- Accent secondaire : froid, discret (tags) ---------- */
  --color-secondary: oklch(74% 0.08 222);
  --color-secondary-soft: oklch(74% 0.08 222 / 13%);
  --color-secondary-border: oklch(74% 0.08 222 / 32%);

  /* ---------- États ---------- */
  --color-danger: oklch(68% 0.18 25);
  --color-danger-soft: oklch(68% 0.18 25 / 12%);
  --color-danger-border: oklch(68% 0.18 25 / 40%);
  --color-offline: oklch(58% 0.01 260);

  /* ---------- Typographie ---------- */
  --font-display: "Space Grotesk Variable", "Space Grotesk", system-ui, "Segoe UI", sans-serif;
  --font-body: "Inter Variable", "Inter", system-ui, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", "SFMono-Regular", Consolas, monospace;

  --text-xs: clamp(0.7rem, 0.68rem + 0.1vw, 0.76rem);
  --text-sm: clamp(0.82rem, 0.78rem + 0.15vw, 0.9rem);
  --text-base: clamp(0.96rem, 0.9rem + 0.22vw, 1.05rem);
  --text-md: clamp(1.08rem, 0.98rem + 0.4vw, 1.28rem);
  --text-lg: clamp(1.3rem, 1.1rem + 0.8vw, 1.7rem);
  --text-xl: clamp(1.7rem, 1.3rem + 1.6vw, 2.5rem);
  --text-display: clamp(2.4rem, 1.4rem + 4vw, 4.6rem);
  --text-hero: clamp(2.8rem, 1.1rem + 6.5vw, 6.8rem);

  --leading-tight: 1.05;
  --leading-snug: 1.25;
  --leading-normal: 1.55;

  /* ---------- Espacement ---------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --space-section: clamp(3rem, 2rem + 4vw, 6rem);

  /* ---------- Rayons ---------- */
  --radius-sm: 6px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  /* ---------- Ombres ---------- */
  --shadow-sm: 0 1px 2px oklch(0% 0 0 / 35%);
  --shadow-md: 0 10px 28px -10px oklch(0% 0 0 / 55%);
  --shadow-lg: 0 28px 64px -18px oklch(0% 0 0 / 65%);
  --shadow-accent: 0 16px 40px -16px oklch(75% 0.14 70 / 38%);

  /* ---------- Mouvement ---------- */
  --duration-fast: 150ms;
  --duration-normal: 300ms;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);

  /* ---------- Mise en page ---------- */
  --max-width: 1280px;
  --border-hairline: 1px solid var(--color-border);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-normal: 0ms;
  }
}