/*
 * D11 - Design tokens
 *
 * Source centrale des valeurs visuelles communes.
 *
 * Règle :
 * - une couleur commune = ici
 * - un espacement commun = ici
 * - un rayon commun = ici
 * - une dimension structurelle commune = ici
 *
 * Les CSS de page doivent réutiliser ces variables.
 */

:root {
  /* =========================================================
     TYPOGRAPHIE
     ========================================================= */

  --font-family-sans:
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif;

  --font-family-mono:
    "Cascadia Code",
    "Consolas",
    monospace;

  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.5rem;
  --font-size-2xl: 2rem;

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

  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.7;


  /* =========================================================
     COULEURS
     ========================================================= */

  --color-background: #0f1115;

  --color-surface: #171a20;
  --color-surface-raised: #1d2129;
  --color-surface-hover: #242932;

  --color-border: #303641;
  --color-border-strong: #444c5a;

  --color-text: #f3f4f6;
  --color-text-muted: #a8afb9;
  --color-text-disabled: #707782;

  --color-primary: #c89b5b;
  --color-primary-hover: #d5ab70;
  --color-primary-active: #b88a4e;
  --color-primary-text: #15100a;

  --color-success: #4fb477;
  --color-warning: #d7a94b;
  --color-danger: #d76363;
  --color-info: #5f9eea;

  --color-overlay: rgb(0 0 0 / 65%);

  --color-focus: #d9ad70;


  /* =========================================================
     ESPACEMENTS
     ========================================================= */

  --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: 4rem;


  /* =========================================================
     ARRONDIS
     ========================================================= */

  --radius-sm: 0.375rem;
  --radius-md: 0.625rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-pill: 999px;


  /* =========================================================
     OMBRES
     ========================================================= */

  --shadow-sm:
    0 2px 8px rgb(0 0 0 / 20%);

  --shadow-md:
    0 8px 24px rgb(0 0 0 / 25%);

  --shadow-lg:
    0 16px 48px rgb(0 0 0 / 35%);


  /* =========================================================
     LAYOUT
     ========================================================= */

  --content-max-width: 1440px;

  --page-padding-x: 1.5rem;
  --page-padding-y: 1.5rem;

  --navigation-width: 260px;
  --navigation-width-collapsed: 72px;

  --header-height: 72px;


  /* =========================================================
     TRANSITIONS
     ========================================================= */

  --transition-fast: 120ms ease;
  --transition-normal: 200ms ease;
  --transition-slow: 320ms ease;


  /* =========================================================
     Z-INDEX
     ========================================================= */

  --z-navigation: 100;
  --z-dropdown: 200;
  --z-overlay: 900;
  --z-modal: 1000;
  --z-notification: 1100;
}