/* ==========================================================================
   Intranet Tricera — design tokens
   Palette dérivée de l'identité déjà posée dans Networking (terracotta,
   or, vert profond), reprise ici en oklch pour une échelle cohérente et
   des contrastes maîtrisés en clair comme en sombre.
   ========================================================================== */

:root {
  color-scheme: light dark;

  /* ---- Échelle neutre ---- */
  --gray-0: oklch(99% 0 0);
  --gray-50: oklch(97.3% 0.003 95);
  --gray-100: oklch(95% 0.004 95);
  --gray-200: oklch(90.5% 0.005 95);
  --gray-300: oklch(83% 0.007 95);
  --gray-400: oklch(69% 0.008 95);
  --gray-500: oklch(55% 0.009 95);
  --gray-600: oklch(44% 0.01 95);
  --gray-700: oklch(34% 0.012 100);
  --gray-800: oklch(24% 0.014 130);
  --gray-900: oklch(16.5% 0.017 155);
  --gray-950: oklch(11.5% 0.022 160);

  /* ---- Marque ----
     Valeurs exactes échantillonnées sur les fichiers logo fournis
     (flamme rouge-orangé #EB6529, flamme orange #EB8529, flamme sauge #7EA069). */
  --brand-terracotta-50: oklch(95% 0.03 42);
  --brand-terracotta-100: oklch(89% 0.06 42);
  --brand-terracotta-400: oklch(66.6% 0.18 41.8); /* couleur exacte du logo */
  --brand-terracotta-500: oklch(58% 0.17 41);
  --brand-terracotta-600: oklch(51% 0.16 40);
  --brand-terracotta-700: oklch(43% 0.14 39);

  --brand-gold-300: oklch(89% 0.09 57);
  --brand-gold-400: oklch(71.4% 0.158 56.8); /* couleur exacte du logo */
  --brand-gold-500: oklch(65% 0.16 56);
  --brand-gold-600: oklch(57% 0.15 54);

  --brand-sage-300: oklch(88% 0.045 134);
  --brand-sage-400: oklch(76% 0.07 134);
  --brand-sage-500: oklch(66.6% 0.087 134.1); /* couleur exacte du logo */
  --brand-sage-600: oklch(55% 0.08 134);

  --brand-green-800: oklch(26% 0.045 165);
  --brand-green-900: oklch(19% 0.038 165);
  --brand-green-950: oklch(13.5% 0.03 165);

  /* ---- Sémantique — thème clair (par défaut) ---- */
  --bg: var(--gray-50);
  --bg-elevated: oklch(100% 0 0);
  --bg-sunken: var(--gray-100);
  --bg-overlay: oklch(15% 0.02 160 / 45%);

  --fg: var(--gray-900);
  --fg-muted: var(--gray-600);
  --fg-subtle: var(--gray-500);
  --fg-on-brand: oklch(99% 0 0);

  --border: var(--gray-200);
  --border-strong: var(--gray-300);

  --primary: var(--brand-terracotta-500);
  --primary-hover: var(--brand-terracotta-600);
  --primary-active: var(--brand-terracotta-700);
  --primary-fg: oklch(99% 0 0);
  --primary-subtle: var(--brand-terracotta-50);
  --primary-subtle-fg: var(--brand-terracotta-700);

  --accent: var(--brand-gold-500);
  --accent-fg: var(--gray-900);
  --accent-subtle: oklch(95.5% 0.05 58);

  --success: var(--brand-sage-600);
  --success-fg: oklch(99% 0 0);
  --success-subtle: oklch(94.5% 0.045 138);
  --success-subtle-fg: oklch(34% 0.07 138);

  --warning: oklch(76% 0.14 78);
  --warning-fg: var(--gray-900);
  --warning-subtle: oklch(95.5% 0.05 85);
  --warning-subtle-fg: oklch(40% 0.1 70);

  --danger: oklch(55% 0.19 25);
  --danger-fg: oklch(99% 0 0);
  --danger-subtle: oklch(95% 0.045 22);
  --danger-subtle-fg: oklch(40% 0.15 25);

  --info: oklch(57% 0.1 240);
  --info-subtle: oklch(95% 0.025 240);
  --info-subtle-fg: oklch(38% 0.08 240);

  --focus-ring: oklch(58% 0.15 38 / 50%);

  /* ---- Typographie ---- */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  --text-xs: clamp(0.72rem, 0.7rem + 0.08vw, 0.78rem);
  --text-sm: clamp(0.82rem, 0.8rem + 0.1vw, 0.875rem);
  --text-base: clamp(0.92rem, 0.9rem + 0.1vw, 1rem);
  --text-lg: clamp(1.05rem, 1rem + 0.22vw, 1.15rem);
  --text-xl: clamp(1.2rem, 1.1rem + 0.45vw, 1.4rem);
  --text-2xl: clamp(1.45rem, 1.3rem + 0.7vw, 1.75rem);
  --text-3xl: clamp(1.8rem, 1.5rem + 1.3vw, 2.35rem);

  --leading-tight: 1.2;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  /* ---- Espacement (base 4px) ---- */
  --space-3xs: 0.125rem;
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4.5rem;

  /* ---- Rayons ---- */
  --radius-sm: 7px;
  --radius-md: 11px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 999px;

  /* ---- Élévation ---- */
  --shadow-sm: 0 1px 2px oklch(20% 0.02 250 / 7%);
  --shadow-md: 0 6px 16px oklch(20% 0.02 250 / 8%), 0 1px 3px oklch(20% 0.02 250 / 6%);
  --shadow-lg: 0 16px 40px oklch(20% 0.02 250 / 12%), 0 2px 8px oklch(20% 0.02 250 / 7%);
  --shadow-xl: 0 28px 70px oklch(20% 0.02 250 / 18%);

  /* ---- Mouvement ---- */
  --duration-fast: 130ms;
  --duration-normal: 220ms;
  --duration-slow: 420ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ---- Z-index ---- */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-toast: 500;
}

/* ---- Thème sombre : suit le système, sauf choix explicite ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: var(--gray-950);
    --bg-elevated: var(--gray-900);
    --bg-sunken: oklch(9.5% 0.024 160);
    --bg-overlay: oklch(5% 0.02 160 / 60%);

    --fg: var(--gray-50);
    --fg-muted: var(--gray-300);
    --fg-subtle: var(--gray-400);

    --border: oklch(29% 0.022 160);
    --border-strong: oklch(37% 0.022 160);

    --primary-subtle: oklch(27% 0.06 38);
    --primary-subtle-fg: var(--brand-terracotta-100);

    --accent-subtle: oklch(27% 0.055 58);

    --success-subtle: oklch(25% 0.05 138);
    --success-subtle-fg: oklch(85% 0.08 138);

    --warning-subtle: oklch(28% 0.06 82);
    --warning-subtle-fg: oklch(85% 0.1 82);

    --danger-subtle: oklch(27% 0.065 25);
    --danger-subtle-fg: oklch(85% 0.09 22);

    --info-subtle: oklch(25% 0.045 240);
    --info-subtle-fg: oklch(82% 0.06 240);
  }
}

:root[data-theme="dark"] {
  --bg: var(--gray-950);
  --bg-elevated: var(--gray-900);
  --bg-sunken: oklch(9.5% 0.024 160);
  --bg-overlay: oklch(5% 0.02 160 / 60%);
  --fg: var(--gray-50);
  --fg-muted: var(--gray-300);
  --fg-subtle: var(--gray-400);
  --border: oklch(29% 0.022 160);
  --border-strong: oklch(37% 0.022 160);
  --primary-subtle: oklch(27% 0.06 38);
  --primary-subtle-fg: var(--brand-terracotta-100);
  --accent-subtle: oklch(27% 0.055 58);
  --success-subtle: oklch(25% 0.05 138);
  --success-subtle-fg: oklch(85% 0.08 138);
  --warning-subtle: oklch(28% 0.06 82);
  --warning-subtle-fg: oklch(85% 0.1 82);
  --danger-subtle: oklch(27% 0.065 25);
  --danger-subtle-fg: oklch(85% 0.09 22);
  --info-subtle: oklch(25% 0.045 240);
  --info-subtle-fg: oklch(82% 0.06 240);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}