/* ==========================================================================
   Commactis — Design System Web
   Source: Design System Commactis v1.1
   ========================================================================== */

:root {
  /* Brand */
  --ds-color-brand-navy: #0e283c;
  --ds-color-brand-green: #72a134;

  /* Neutrals */
  --ds-color-neutral-50: #f5f7f3;
  --ds-color-neutral-100: #edf1ed;
  --ds-color-neutral-200: #e2e8e2;
  --ds-color-neutral-300: #d7e1d8;
  --ds-color-neutral-400: #adb8af;
  --ds-color-neutral-500: #718078;
  --ds-color-neutral-600: #52655a;
  --ds-color-neutral-700: #365542;
  --ds-color-neutral-800: #203027;
  --ds-color-neutral-900: #0e283c;

  /* Functional roles */
  --ds-color-action-primary: var(--ds-color-brand-navy);
  --ds-color-action-primary-hover: #163a54;
  --ds-color-action-primary-active: #0b2132;

  --ds-color-action-secondary-bg: #ffffff;
  --ds-color-action-secondary-text: var(--ds-color-neutral-800);
  --ds-color-action-secondary-border: var(--ds-color-neutral-300);

  --ds-color-text-primary: var(--ds-color-neutral-800);
  --ds-color-text-secondary: var(--ds-color-neutral-600);
  --ds-color-text-inverse: #ffffff;

  --ds-color-background-default: var(--ds-color-neutral-50);
  --ds-color-surface-default: #ffffff;
  --ds-color-surface-raised: #ffffff;
  --ds-color-border-default: var(--ds-color-neutral-200);
  --ds-color-focus: var(--ds-color-brand-navy);

  /* Semantic */
  --ds-color-success-strong: #176b45;
  --ds-color-warning-strong: #8a5a00;
  --ds-color-error-strong: #b42318;
  --ds-color-info-strong: #145a8d;

  /* Typography */
  --ds-font-family-sans: Inter, "Segoe UI", Arial, sans-serif;
  --ds-font-family-mono: "SFMono-Regular", Consolas, monospace;

  --ds-font-size-display: 2.25rem;
  --ds-line-height-display: 2.5rem;
  --ds-font-weight-display: 700;
  --ds-letter-spacing-display: -0.02em;

  --ds-font-size-h1: 2rem;
  --ds-line-height-h1: 2.5rem;
  --ds-font-weight-h1: 700;
  --ds-letter-spacing-h1: -0.01em;

  --ds-font-size-h2: 1.5rem;
  --ds-line-height-h2: 2rem;
  --ds-font-weight-h2: 700;

  --ds-font-size-h3: 1.25rem;
  --ds-line-height-h3: 1.75rem;
  --ds-font-weight-h3: 600;

  --ds-font-size-body: 1rem;
  --ds-line-height-body: 1.5rem;
  --ds-font-weight-body: 400;

  --ds-font-size-body-small: 0.875rem;
  --ds-line-height-body-small: 1.25rem;

  --ds-font-size-label: 0.875rem;
  --ds-line-height-label: 1.25rem;
  --ds-font-weight-label: 600;
  --ds-letter-spacing-label: 0.01em;

  --ds-font-size-caption: 0.75rem;
  --ds-line-height-caption: 1rem;
  --ds-letter-spacing-caption: 0.02em;

  /* Spacing */
  --ds-spacing-0: 0;
  --ds-spacing-0-5: 0.125rem;
  --ds-spacing-1: 0.25rem;
  --ds-spacing-2: 0.5rem;
  --ds-spacing-3: 0.75rem;
  --ds-spacing-4: 1rem;
  --ds-spacing-5: 1.25rem;
  --ds-spacing-6: 1.5rem;
  --ds-spacing-8: 2rem;
  --ds-spacing-10: 2.5rem;
  --ds-spacing-12: 3rem;
  --ds-spacing-16: 4rem;

  /* Radius */
  --ds-radius-none: 0;
  --ds-radius-sm: 0.25rem;
  --ds-radius-md: 0.5rem;
  --ds-radius-lg: 0.75rem;
  --ds-radius-xl: 1rem;
  --ds-radius-full: 9999px;

  /* Shadows */
  --ds-shadow-none: none;
  --ds-shadow-surface: 0 1px 2px rgb(14 40 60 / 8%);
  --ds-shadow-raised: 0 3px 14px rgb(14 40 60 / 8%);
  --ds-shadow-floating: 0 8px 24px rgb(14 40 60 / 14%);
  --ds-shadow-popover: 0 12px 32px rgb(14 40 60 / 16%);
  --ds-shadow-modal: 0 16px 50px rgb(14 40 60 / 20%);

  /* Motion */
  --ds-motion-duration-short: 120ms;
  --ds-motion-duration-medium: 200ms;
  --ds-motion-duration-long: 320ms;
  --ds-motion-easing-standard: ease;
  --ds-motion-easing-in: ease-in;
  --ds-motion-easing-out: ease-out;

  /* Controls */
  --ds-size-control-compact: 2.25rem;
  --ds-size-control-standard: 2.5rem;
  --ds-size-control-large: 2.75rem;
  --ds-size-touch-target: 2.75rem;

  /* Site layout — extension éditoriale du Design System */
  --site-content-max: 75rem;
  --site-reading-max: 48rem;
  --site-header-height: 5rem;

  /* Z-index */
  --ds-z-base: 0;
  --ds-z-sticky: 20;
  --ds-z-dropdown: 100;
  --ds-z-popover: 1200;
  --ds-z-modal: 2000;
  --ds-z-toast: 2100;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 20rem;
  background: var(--ds-color-background-default);
  color: var(--ds-color-text-primary);
  font-family: var(--ds-font-family-sans);
  font-size: var(--ds-font-size-body);
  line-height: var(--ds-line-height-body);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img,
svg {
  display: block;
  max-width: 100%;
}

button,
input,
textarea,
select {
  font: inherit;
}

a {
  color: inherit;
}

h1,
h2,
h3,
p,
ul {
  margin-top: 0;
}

h1 {
  font-size: var(--ds-font-size-h1);
  line-height: var(--ds-line-height-h1);
  font-weight: var(--ds-font-weight-h1);
  letter-spacing: var(--ds-letter-spacing-h1);
}

h2 {
  font-size: var(--ds-font-size-h2);
  line-height: var(--ds-line-height-h2);
  font-weight: var(--ds-font-weight-h2);
}

h3 {
  font-size: var(--ds-font-size-h3);
  line-height: var(--ds-line-height-h3);
  font-weight: var(--ds-font-weight-h3);
}

p {
  margin-bottom: var(--ds-spacing-4);
}

:focus-visible {
  outline: 3px solid var(--ds-color-focus);
  outline-offset: 2px;
}

::selection {
  background: rgb(114 161 52 / 25%);
}

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