/* ============================================================
   tokens.css — design system v0 — structurel uniquement
   Owner: xilrian-agent (XA) · 2026-05-08
   ============================================================
   Convention : variables CSS structurelles partagées entre toutes
   les surfaces xilrian.net. **Pas de variables chromatiques** ici
   (cf. design-system/README.md philosophie 1).

   Préfixe `--ds-*` = réservé design system. Ne pas redéfinir.
   Préfixe `--surface-*` = réservé aux agents pour leur surcharge
   locale (palette, fonts custom, branding).
   ============================================================ */

:root {
  /* ----- Spacing scale (rem-based, multiplicatif 4px≈0.25rem) ----- */
  --ds-space-0: 0;
  --ds-space-1: 0.25rem;   /* 4px  — micro */
  --ds-space-2: 0.5rem;    /* 8px  — tight */
  --ds-space-3: 0.75rem;   /* 12px */
  --ds-space-4: 1rem;      /* 16px — base */
  --ds-space-5: 1.5rem;    /* 24px */
  --ds-space-6: 2rem;      /* 32px */
  --ds-space-7: 3rem;      /* 48px */
  --ds-space-8: 4rem;      /* 64px */
  --ds-space-9: 6rem;      /* 96px */
  --ds-space-10: 8rem;     /* 128px */

  /* ----- Typography scale (modulaire ~1.25 ratio) ----- */
  --ds-font-size-xs:   0.75rem;   /* 12px */
  --ds-font-size-sm:   0.875rem;  /* 14px */
  --ds-font-size-base: 1rem;      /* 16px */
  --ds-font-size-md:   1.125rem;  /* 18px */
  --ds-font-size-lg:   1.25rem;   /* 20px */
  --ds-font-size-xl:   1.5rem;    /* 24px */
  --ds-font-size-2xl:  1.875rem;  /* 30px */
  --ds-font-size-3xl:  2.25rem;   /* 36px */
  --ds-font-size-4xl:  3rem;      /* 48px */

  /* Line-heights — adaptés au type de contenu */
  --ds-line-height-tight: 1.2;    /* titles */
  --ds-line-height-snug:  1.4;    /* short text, captions */
  --ds-line-height-normal: 1.6;   /* body */
  --ds-line-height-loose:  1.8;   /* long-form articles, RA papers */

  /* Font weights — neutres, agents peuvent surcharger */
  --ds-font-weight-normal:    400;
  --ds-font-weight-medium:    500;
  --ds-font-weight-semibold:  600;
  --ds-font-weight-bold:      700;

  /* Font families — fallback stack par défaut, surchargeable */
  --ds-font-family-sans: -apple-system, BlinkMacSystemFont, "Segoe UI",
                         Roboto, "Helvetica Neue", Arial, sans-serif;
  --ds-font-family-serif: Georgia, Cambria, "Times New Roman", serif;
  --ds-font-family-mono: "SFMono-Regular", Consolas, "Liberation Mono",
                         Menlo, monospace;

  /* ----- Layout — container widths ----- */
  --ds-container-narrow: 42rem;   /* 672px — articles long-form, lab papers */
  --ds-container-base:   64rem;   /* 1024px — pages standard */
  --ds-container-wide:   80rem;   /* 1280px — galleries, dashboards */
  --ds-container-full:   100%;

  /* Layout — page padding par breakpoint */
  --ds-page-padding-x: var(--ds-space-4);  /* mobile default */

  /* ----- Breakpoints (custom properties pour cohérence, à utiliser avec @media) ----- */
  /* Note: @media ne lit pas les custom properties directement,
     ces variables servent de référence documentaire. */
  --ds-breakpoint-sm: 640px;
  --ds-breakpoint-md: 768px;
  --ds-breakpoint-lg: 1024px;
  --ds-breakpoint-xl: 1280px;

  /* ----- Border radius ----- */
  --ds-radius-none:  0;
  --ds-radius-sm:    0.125rem;  /* 2px */
  --ds-radius-base:  0.25rem;   /* 4px */
  --ds-radius-md:    0.375rem;  /* 6px */
  --ds-radius-lg:    0.5rem;    /* 8px */
  --ds-radius-xl:    0.75rem;   /* 12px */
  --ds-radius-full:  9999px;

  /* ----- Border widths ----- */
  --ds-border-width-0: 0;
  --ds-border-width-1: 1px;
  --ds-border-width-2: 2px;
  --ds-border-width-4: 4px;

  /* ----- Z-index layers (échelle ordonnée) ----- */
  --ds-z-base:     0;
  --ds-z-dropdown: 100;
  --ds-z-sticky:   200;
  --ds-z-overlay:  300;
  --ds-z-modal:    400;
  --ds-z-popover:  500;
  --ds-z-toast:    600;

  /* ----- Shadows (structurel, pas chromatique : ombres neutres) ----- */
  --ds-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --ds-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
                  0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --ds-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
                  0 4px 6px -2px rgba(0, 0, 0, 0.05);

  /* ----- Transitions ----- */
  --ds-transition-fast:   150ms ease-out;
  --ds-transition-base:   250ms ease-out;
  --ds-transition-slow:   400ms ease-out;
}

/* Breakpoint scaling — ajustement page-padding sur viewport large */
@media (min-width: 768px) {
  :root {
    --ds-page-padding-x: var(--ds-space-6);
  }
}

@media (min-width: 1024px) {
  :root {
    --ds-page-padding-x: var(--ds-space-8);
  }
}