/* Clicjo · design tokens
   Source: logo A31-A45, source/clicjo-logo-master-A31-A45.ai
   Core: navy #2E4763, sage #93BAA8, cream #F2E8D0 */
:root {
  /* ---- brand ramps ---- */
  --clicjo-navy-50: #F5F7F9;
  --clicjo-navy-100: #E8EDF2;
  --clicjo-navy-200: #CBD8E7;
  --clicjo-navy-300: #A8BED7;
  --clicjo-navy-400: #82A1C5;
  --clicjo-navy-500: #5882B1;
  --clicjo-navy-600: #476E99;
  --clicjo-navy-700: #3A5A7D;
  --clicjo-navy-800: #2E4763;
  --clicjo-navy-900: #203246;
  --clicjo-navy-950: #18212A;

  --clicjo-sage-50: #F6F9F7;
  --clicjo-sage-100: #EAF0ED;
  --clicjo-sage-200: #D0E1D9;
  --clicjo-sage-300: #B1CDC0;
  --clicjo-sage-400: #93BAA8;
  --clicjo-sage-500: #6AA087;
  --clicjo-sage-600: #578972;
  --clicjo-sage-700: #48705D;
  --clicjo-sage-800: #385749;
  --clicjo-sage-900: #283E34;
  --clicjo-sage-950: #1C2722;

  --clicjo-cream-50: #FBF9F4;
  --clicjo-cream-100: #F5F0E6;
  --clicjo-cream-200: #F2E8D0;
  --clicjo-cream-300: #E3CE9B;
  --clicjo-cream-400: #D7B96F;
  --clicjo-cream-500: #CAA13F;
  --clicjo-cream-600: #B08A31;
  --clicjo-cream-700: #907128;
  --clicjo-cream-800: #70581F;
  --clicjo-cream-900: #503F16;
  --clicjo-cream-950: #2F2713;

  /* ---- illustration accents (série v3 « vive ») ---- */
  --clicjo-green-vivid: #73C28B;  /* vert Déclic avivé : aplats d'illustrations, icônes, motifs */
  --clicjo-amber: #E9A12C;        /* ambre : accent d'illustration (remplace l'ocre #D99A3C dans les visuels) */

  /* ---- semantic ---- */
  --clicjo-success: #4E8A6B;
  --clicjo-success-text: #417359;
  --clicjo-success-surface: #E0EDE6;
  --clicjo-warning: #D99A3C;
  --clicjo-warning-text: #8A5D1B;
  --clicjo-warning-surface: #F4E3C9;
  --clicjo-danger: #C0553F;
  --clicjo-danger-text: #A94B37;
  --clicjo-danger-surface: #F5E4E0;
  --clicjo-info: #4A7FA5;
  --clicjo-info-text: #3F6C8C;
  --clicjo-info-surface: #DFE9F1;

  /* ---- roles ---- */
  --clicjo-surface: #F2E8D0;
  --clicjo-surface-raised: #FFFFFF;
  --clicjo-surface-sunken: #F2E8D0;
  --clicjo-surface-inverse: #2E4763;
  --clicjo-text-primary: #203246;
  --clicjo-text-secondary: #3A5A7D;
  --clicjo-text-on-inverse: #F2E8D0;
  --clicjo-text-muted: #5882B1;
  --clicjo-border: #E3CE9B;
  --clicjo-border-strong: #A8BED7;
  --clicjo-accent: #93BAA8;
  --clicjo-accent-strong: #48705D;
  --clicjo-focus-ring: #2E4763;

  /* ---- type ---- */
  --clicjo-font-brand: "Baloo 2", "Quicksand", ui-rounded, system-ui, sans-serif;
  --clicjo-font-heading: "Poppins", "Nunito", ui-sans-serif, system-ui, sans-serif;
  --clicjo-font-body: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;

  /* ---- radius: echoes the logo's round terminals ---- */
  --clicjo-radius-sm: 8px;
  --clicjo-radius-md: 14px;
  --clicjo-radius-lg: 24px;
  --clicjo-radius-pill: 999px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --clicjo-surface: #18212A;
    --clicjo-surface-raised: #203246;
    --clicjo-surface-sunken: #070D14;
    --clicjo-surface-inverse: #F2E8D0;
    --clicjo-text-primary: #F2E8D0;
    --clicjo-text-secondary: #E3CE9B;
    --clicjo-text-on-inverse: #203246;
    --clicjo-text-muted: #A8BED7;
    --clicjo-border: #2E4763;
    --clicjo-border-strong: #476E99;
    --clicjo-accent: #93BAA8;
    --clicjo-accent-strong: #B1CDC0;
    --clicjo-focus-ring: #93BAA8;
  }
}