/* ==========================================================================
   SANSIL 3D — tokens.css
   Design system : couleurs, typographie, espacements, motion, élévations.
   Source unique de vérité. Aucune valeur codée en dur ailleurs.
   ========================================================================== */

/* --- Polices auto-hébergées (RGPD : aucun appel à Google Fonts) ----------- */

@font-face {
  font-family: "Space Grotesk";
  src: url("../fonts/SpaceGrotesk.woff2") format("woff2-variations");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter.woff2") format("woff2-variations");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Fira Code";
  src: url("../fonts/FiraCode.woff2") format("woff2-variations");
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- Couleurs corporate (charte) -------------------------------------- */
  --c-bg: #0a0e1a;          /* fond principal */
  --c-cyan: #00e5ff;        /* accent énergie */
  --c-violet: #7b2fff;      /* accent premium */
  --c-text: #f0f4ff;        /* texte principal */
  --c-muted: #a0aec0;       /* texte secondaire */
  --c-success: #00d97e;     /* validé / en stock */
  --c-danger: #ff4444;      /* erreur / rupture */

  /* --- Surfaces dérivées ------------------------------------------------ */
  --c-surface: #101728;         /* carte, panneau */
  --c-surface-2: #16203a;       /* carte survolée / champ actif */
  --c-border: #1f2b47;          /* trait de séparation */
  --c-border-strong: #2c3c63;   /* bordure de champ */
  --c-overlay: rgba(10, 14, 26, 0.88);
  --c-placeholder: #66748f;      /* texte indicatif des champs */
  --c-violet-clair: #b48cff;     /* violet lisible sur fond sombre */
  --c-warn: #ffb020;             /* avertissement, distinct de l'alerte */
  --c-viewer-bg: #131c33;        /* fond du halo de l'aperçu 3D */
  --shadow-rgb: 0, 0, 0;

  /* Teintes transparentes (badges, halos, focus) */
  --c-cyan-08: rgba(0, 229, 255, 0.08);
  --c-cyan-16: rgba(0, 229, 255, 0.16);
  --c-cyan-40: rgba(0, 229, 255, 0.4);
  --c-violet-08: rgba(123, 47, 255, 0.08);
  --c-violet-16: rgba(123, 47, 255, 0.16);
  --c-success-12: rgba(0, 217, 126, 0.12);
  --c-danger-12: rgba(255, 68, 68, 0.12);

  /* Texte sur fond clair/accentué (contraste AA garanti) */
  --c-on-accent: #05070f;

  /* --- Dégradés & signature « lignes de couche » ------------------------- */
  --grad-accent: linear-gradient(135deg, var(--c-cyan) 0%, var(--c-violet) 100%);
  --grad-fade: linear-gradient(180deg, transparent, var(--c-bg));
  /* Striation FDM : rappel des strates d'impression, utilisé en séparateur */
  --layer-lines: repeating-linear-gradient(
    180deg,
    var(--c-cyan-08) 0px,
    var(--c-cyan-08) 1px,
    transparent 1px,
    transparent 6px
  );

  /* --- Typographie ------------------------------------------------------- */
  --f-display: "Space Grotesk", "Segoe UI", system-ui, -apple-system, sans-serif;
  --f-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-mono: "Fira Code", ui-monospace, "SF Mono", Consolas, monospace;

  /* Échelle fluide 320px → 2560px (clamp, pas de media query) */
  --t-h1: clamp(2.25rem, 1.4rem + 4.2vw, 4.5rem);
  --t-h2: clamp(1.75rem, 1.25rem + 2.4vw, 3rem);
  --t-h3: clamp(1.3rem, 1.1rem + 1vw, 1.875rem);
  --t-h4: clamp(1.1rem, 1rem + 0.5vw, 1.375rem);
  --t-lead: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  --t-body: 1rem;
  --t-sm: 0.9375rem;
  --t-xs: 0.8125rem;
  --t-eyebrow: 0.75rem;

  --lh-tight: 1.08;
  --lh-title: 1.18;
  --lh-body: 1.65;

  --ls-tight: -0.02em;
  --ls-eyebrow: 0.14em;

  --w-regular: 400;
  --w-medium: 500;
  --w-semibold: 600;
  --w-bold: 700;

  /* --- Espacements (base 4px) -------------------------------------------- */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --s-10: 8rem;
  /* Rythme vertical des sections, fluide */
  --s-section: clamp(3.5rem, 2rem + 7vw, 7.5rem);

  /* --- Mise en page ------------------------------------------------------ */
  --w-container: 1240px;
  --w-wide: 1560px;
  --w-prose: 68ch;
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);
  --header-h: 68px;

  /* --- Rayons ------------------------------------------------------------ */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* --- Élévations -------------------------------------------------------- */
  --e-1: 0 1px 2px rgba(var(--shadow-rgb), 0.4);
  --e-2: 0 8px 24px rgba(var(--shadow-rgb), 0.45);
  --e-3: 0 20px 50px rgba(var(--shadow-rgb), 0.55);
  --glow-cyan: 0 0 0 1px var(--c-cyan-40), 0 8px 32px rgba(0, 229, 255, 0.18);

  /* --- Motion ------------------------------------------------------------ */
  --dur: 0.3s;
  --dur-fast: 0.15s;
  --dur-slow: 0.6s;
  --ease: cubic-bezier(0.16, 0.84, 0.44, 1); /* ease-out fluide */
  --hover-lift: brightness(1.05);            /* +5 % de luminosité au survol */

  /* --- Couches ----------------------------------------------------------- */
  --z-base: 1;
  --z-sticky: 100;
  --z-header: 200;
  --z-drawer: 300;
  --z-modal: 400;
  --z-toast: 500;
}

/* Accessibilité : respect de la préférence système d'animation réduite */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur: 0.01ms;
    --dur-fast: 0.01ms;
    --dur-slow: 0.01ms;
  }
}