/* ============================================================
   ColorLoop Design System — CSS Custom Properties
   Part of the ColorSUITE family (ColorLoop · ColorBrand · ColorConnect)
   Generated from the brand foundations. Import once at :root.
   ============================================================ */

:root {
  /* --- Brand spectrum --------------------------------------- */
  --cl-red:    #F50C0C;   /* CMYK 0/95/95/4   */
  --cl-pink:   #FAA1DB;   /* CMYK 0/36/12/2   */
  --cl-blue:   #19AAE3;   /* CMYK 89/25/0/11  */
  --cl-yellow: #FBCB05;   /* CMYK 0/19/98/2   */
  --cl-green:  #64A932;   /* CMYK 41/0/70/34  */
  --cl-ink:    #141416;   /* wordmark "Loop" + text */

  /* --- Neutrals --------------------------------------------- */
  --cl-white:      #FFFFFF;
  --cl-neutral-100:#F4F4F5;
  --cl-neutral-200:#E7E7EA;
  --cl-neutral-300:#D4D4D8;
  --cl-neutral-400:#A1A1AA;
  --cl-neutral-500:#71717A;
  --cl-neutral-700:#3F3F46;
  --cl-neutral-900:#141416;

  /* --- Primary action (accessible) -------------------------- *
   * UI primary = deep ColorLoop blue (white text passes WCAG AA,
   * contrast 7.2:1). Matches Figma token Background/Brand/Default. */
  --cl-primary:        #155E7A;   /* Blue/800 — buttons, links, focus */
  --cl-primary-hover:  #14485D;   /* Blue/900 */
  --cl-primary-active: #133644;   /* Blue/1000 */
  --cl-on-primary:     #FFFFFF;

  /* Blue ramp (brand) */
  --cl-blue-100:#E8F6FC; --cl-blue-200:#C8EBF8; --cl-blue-300:#9EDBF3;
  --cl-blue-400:#5EC4EB; --cl-blue-500:#19AAE3; --cl-blue-600:#1892C2;
  --cl-blue-700:#16769C; --cl-blue-800:#155E7A; --cl-blue-900:#14485D; --cl-blue-1000:#133644;

  /* --- Semantic (mapped to the spectrum) -------------------- */
  --cl-success: var(--cl-green);   /* conforme / dans la tolérance ΔE */
  --cl-info:    var(--cl-blue);
  --cl-warning: var(--cl-yellow);  /* proche tolérance */
  --cl-error:   var(--cl-red);     /* hors tolérance ΔE */

  /* --- Text / surface roles --------------------------------- */
  --cl-text-primary:   var(--cl-neutral-900);
  --cl-text-secondary: var(--cl-neutral-500);
  --cl-text-inverse:   var(--cl-white);
  --cl-surface-page:   var(--cl-white);
  --cl-surface-subtle: var(--cl-neutral-100);
  --cl-surface-muted:  var(--cl-neutral-200);
  --cl-surface-inverse:var(--cl-neutral-900);

  /* --- Typography ------------------------------------------- */
  --cl-font-display: "ColorLoop", "Baloo 2", system-ui, sans-serif; /* logo & hero only */
  --cl-font-heading: "Poppins", system-ui, sans-serif;
  --cl-font-body:    "Inter", system-ui, sans-serif;

  --cl-weight-regular: 400;
  --cl-weight-medium:  500;
  --cl-weight-semibold:600;
  --cl-weight-bold:    700;

  --cl-text-display: 64px;
  --cl-text-h1: 48px;
  --cl-text-h2: 36px;
  --cl-text-h3: 28px;
  --cl-text-h4: 22px;
  --cl-text-body-l: 18px;
  --cl-text-body: 16px;
  --cl-text-body-s: 14px;
  --cl-text-caption: 12px;

  --cl-leading-tight: 1.1;
  --cl-leading-heading: 1.25;
  --cl-leading-body: 1.5;

  /* --- Spacing (4px base) ----------------------------------- */
  --cl-space-1: 4px;
  --cl-space-2: 8px;
  --cl-space-3: 12px;
  --cl-space-4: 16px;
  --cl-space-6: 24px;
  --cl-space-8: 32px;
  --cl-space-12: 48px;
  --cl-space-16: 64px;
  --cl-space-24: 96px;

  /* --- Radius (rounded "bubble" identity) ------------------- */
  --cl-radius-sm: 8px;
  --cl-radius-md: 16px;
  --cl-radius-lg: 24px;
  --cl-radius-xl: 32px;
  --cl-radius-pill: 999px;

  /* --- Elevation -------------------------------------------- */
  --cl-shadow-sm: 0 1px 2px rgba(20,20,22,.08);
  --cl-shadow-md: 0 4px 16px rgba(20,20,22,.10);
  --cl-shadow-lg: 0 12px 32px rgba(20,20,22,.12);

  /* --- Signature spectrum gradient (the "loop") ------------- */
  --cl-gradient-spectrum: linear-gradient(
    90deg,
    var(--cl-red) 0%,
    var(--cl-pink) 25%,
    var(--cl-blue) 50%,
    var(--cl-yellow) 75%,
    var(--cl-green) 100%
  );
}

/* Optional dark surface helper */
[data-theme="dark"] {
  --cl-text-primary:   var(--cl-white);
  --cl-text-secondary: var(--cl-neutral-400);
  --cl-surface-page:   var(--cl-neutral-900);
  --cl-surface-subtle: #1C1C20;
  --cl-surface-muted:  #26262B;
}