/* Généré depuis design-tokens.json par tools/design-tokens ; ne pas modifier à la main.
   Pour changer un jeton : modifier le JSON, lancer « dotnet run --project tools/design-tokens » à la racine du dépôt et commiter
   les fichiers régénérés (docs/design/design-system.md, « Tokens »). Un alias du JSON s'écrit var() ; les styles de texte,
   typography.*, ont leur propre feuille, typography.css. */

:root {
  /* color.brand */
  --cj-green: #006b4f;
  --cj-green-dark: #004f3a;
  --cj-green-soft: #ddf2e9;
  --cj-yellow: #ffc425;
  --cj-yellow-dark: #e3a900;
  --cj-blue: #087ff5;
  --cj-red: #ff3540;

  /* color.family */
  --cj-family-move: var(--cj-green);
  --cj-family-listen: var(--cj-red);
  --cj-family-discover: var(--cj-yellow);
  --cj-family-meet: var(--cj-blue);

  /* color.neutral */
  --cj-ink: #11110f;
  --cj-text: #1e2435;
  --cj-text-muted: #62697a;
  --cj-line: #aeb5c3;
  --cj-line-soft: #d9dde3;
  --cj-canvas: #f5f5ef;
  --cj-surface: #ffffff;

  /* color.feedback */
  --cj-feedback-success: #0b7a5a;
  --cj-feedback-info: var(--cj-blue);
  --cj-feedback-warning: #f4af13;
  --cj-feedback-danger: #f03648;
  --cj-feedback-danger-strong: #a3231c;

  /* space */
  --cj-space-0: 0px;
  --cj-space-1: 4px;
  --cj-space-2: 8px;
  --cj-space-3: 12px;
  --cj-space-4: 16px;
  --cj-space-5: 20px;
  --cj-space-6: 24px;
  --cj-space-8: 32px;
  --cj-space-10: 40px;
  --cj-space-12: 48px;
  --cj-space-16: 64px;
  --cj-space-20: 80px;
  --cj-space-24: 96px;

  /* radius */
  --cj-radius-none: 0px;
  --cj-radius-xs: 2px;
  --cj-radius-sm: 4px;
  --cj-radius-md: 8px;
  --cj-radius-lg: 12px;
  --cj-radius-pill: 999px;

  /* font.family */
  --cj-font-display: "Anton", "Impact", sans-serif;
  --cj-font-body: "Roboto Condensed", "Arial Narrow", sans-serif;

  /* font.size */
  --cj-font-size-xs: 12px;
  --cj-font-size-sm: 14px;
  --cj-font-size-md: 16px;
  --cj-font-size-lg: 20px;
  --cj-font-size-xl: 24px;
  --cj-font-size-2xl: 32px;
  --cj-font-size-3xl: 44px;
  --cj-font-size-4xl: 56px;
  --cj-font-size-hero: 76px;

  /* breakpoint */
  --cj-breakpoint-tablet: 768px;
  --cj-breakpoint-desktop: 1200px;

  /* layout */
  --cj-content-max: 1080px;
  --cj-pro-content-max: 1440px;
  --cj-mobile-gutter: 16px;
  --cj-tablet-gutter: 24px;
  --cj-desktop-gutter: 40px;
  --cj-gutter: var(--cj-mobile-gutter);
  --cj-grid-gap: 16px;
  --cj-sidebar-width: 184px;
  --cj-bottom-nav-height: 72px;
  --cj-form-max: 416px;

  /* motion */
  --cj-motion-fast: 120ms;
  --cj-motion-standard: 200ms;
  --cj-motion-slow: 320ms;
  --cj-motion-easing: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* transition */
  --cj-transition: var(--cj-motion-standard) var(--cj-motion-easing);

  /* shadow */
  --cj-shadow-focus: 0px 0px 0px 3px rgb(8 127 245 / 28%);
  --cj-shadow-button: 2px 2px 0px 0px var(--cj-green);

  /* inset */
  --cj-inset-page: var(--cj-space-4);
  --cj-inset-card: var(--cj-space-3);
  --cj-inset-button: var(--cj-space-0) var(--cj-space-4);
  --cj-inset-section-top: var(--cj-space-6) 0px 0px 0px;

  /* touchTarget */
  --cj-touch-target-min: 44px;

  /* line */
  --cj-line-width: 1px;

  /* icon */
  --cj-icon-size: 24px;
  --cj-icon-stroke: 2px;

  /* brandMark */
  --cj-brand-mark-size: 32px;
}

@media (min-width: 768px) {
  :root {
    --cj-gutter: var(--cj-tablet-gutter);
  }
}

@media (min-width: 1200px) {
  :root {
    --cj-gutter: var(--cj-desktop-gutter);
  }
}