/* ============================================================
   Elicla — Design tokens
   Source : Design System/files/elicla-design-system.llm.md
   Toutes les valeurs de marque sont ici. Ne pas coder de couleur
   ou d'espacement en dur ailleurs — référencer ces variables.
   ============================================================ */

:root {
  /* --- Brand core (échantillonné du logo) --- */
  --navy: #002048; /* wordmark — deep editorial navy   */
  --gold: #edcf8c; /* crescent top — warm secondary    */
  --violet: #6536f5; /* crescent base — PRIMARY accent   */

  /* --- Ink & neutres --- */
  --ink: #0e0e0e; /* texte / surfaces near-black       */
  --gray: #999999; /* texte discret, légendes           */
  --gray-strong: #5e5e5e; /* texte secondaire lisible          */
  --border: #e8e8e8; /* hairlines & lignes de grille      */
  --white: #ffffff;

  /* --- Warm paper (fond de section alternatif) --- */
  --warm: #f4f3ef;
  --warm-deep: #eae8e1;

  /* --- Teintes d'accent --- */
  --violet-ink: #4a22c7; /* pressed / violet foncé */
  --violet-soft: rgba(101, 54, 245, 0.08); /* wash / hover bg */
  --navy-soft: rgba(0, 32, 72, 0.06);

  /* --- Alias sémantiques — à préférer dans les composants --- */
  --bg: var(--white);
  --surface-warm: var(--warm);
  --surface-dark: var(--ink);
  --text-body: var(--ink);
  --text-muted: var(--gray);
  --text-secondary: var(--gray-strong);
  --accent: var(--violet);
  --accent-hover: var(--violet-ink);
  --text-on-accent: var(--white);
  --border-color: var(--border);
  --border-strong: var(--ink);
  --border-inverse: rgba(255, 255, 255, 0.14);

  /* --- Sur fond sombre (portfolio, CTA violet) --- */
  --violet-on-dark: rgba(
    101,
    54,
    245,
    0.85
  ); /* accent violet lisible sur ink */
  --on-dark-muted: rgba(255, 255, 255, 0.55);
  --on-dark-faint: rgba(255, 255, 255, 0.4);
  --border-inverse-strong: rgba(
    255,
    255,
    255,
    0.22
  ); /* contrôles slider sur ink */

  /* --- Typographie --- */
  --font-sans: "DM Sans", system-ui, -apple-system, sans-serif;
  --font-mono: "DM Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Weights */
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 900;

  /* Échelle typographique */
  --text-overline: 11px;
  --text-xs: 12px;
  --text-sm: 13px;
  --text-base: 16px;
  --text-lg: 18px;
  --text-xl: 22px;
  --text-2xl: 28px;
  --display-sm: clamp(28px, 3vw, 42px);
  --display-md: clamp(36px, 4vw, 60px);
  --display-lg: clamp(40px, 4.5vw, 68px);

  /* Boutons : une seule taille pour toutes les variantes (+ une taille large) */
  --text-btn: var(--text-sm);
  --text-btn-lg: var(--text-lg);

  /* Letter spacing */
  --tracking-display: -0.04em;
  --tracking-tight: -0.03em;
  --tracking-snug: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.2em;

  /* Line height */
  --leading-display: 0.97;
  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-body: 1.55;
  --leading-relaxed: 1.7;

  /* --- Espacement --- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 44px;
  --space-8: 64px;
  --space-9: 80px;

  /* --- Layout --- */
  --gutter: 72px; /* padding horizontal de page */
  --gutter-tight: 24px; /* gutter mobile */
  --section-y: 80px;
  --section-y-lg: 100px; /* rythme vertical de section */
  --content-max: 760px; /* mesure lisible pour les statements */
  --shell-max: 1440px; /* cap du contenu desktop */
  /* Padding horizontal de page : vaut le gutter sur petits écrans, et de
     quoi centrer un contenu capé à --shell-max sur grands écrans. Les
     sections l'utilisent à la place de --gutter → contenu limité en largeur,
     fonds (ink, warm, violet) toujours pleine largeur. Voir mockup v5. */
  --pad-x: max(var(--gutter), calc((100% - var(--shell-max)) / 2));

  /* --- Radius --- */
  --radius-sm: 3px;
  --radius-md: 8px;
  --radius-pill: 100px;
  --radius-img: 16px; /* blocs image / média (hero, portfolio) */
  --radius-cta: 16px; /* bloc CTA violet arrondi */

  /* --- Bordures — cœur du système visuel --- */
  --hairline: 1px solid var(--border-color);

  /* --- Ombres — usage minimal, layout plat --- */
  --shadow-pop: 0 14px 44px rgba(0, 32, 72, 0.14); /* menus, toasts uniquement */

  /* --- Motion --- */
  --transition-fast: 0.15s ease;
  --transition-med: 0.25s cubic-bezier(0.2, 0.7, 0.2, 1);
}