/*
 * KoulFlo — design tokens.
 * Source : direction artistique V1 (koulflo-da.html).
 * Couche 1 : palette brute. Couche 2 : rôles sémantiques. Les composants n'utilisent que la couche 2.
 */
:root {
  /* Palette */
  --kf-ink: #17140F;
  --kf-ink-soft: #221E17;
  --kf-cream: #F4EFE6;
  --kf-cream-dim: #EAE3D4;
  --kf-copper: #B5713A;
  --kf-copper-dim: #8C5A2E;
  --kf-steel: #3E5B63;
  --kf-steel-dim: #2C4348;
  --kf-brass: #6B5637;
  --kf-signal: #7C9468;
  --kf-line: rgba(107, 86, 55, 0.28);

  /* Dérivés (restent dans la famille cuivre/acier : ni rouge criard, ni vert néon) */
  --kf-copper-light: #D08F5A;   /* cuivre lisible sur Encre */
  --kf-steel-light: #7FA1AA;    /* acier lisible sur Encre (équivalent du brightness(1.8) de la DA) */
  --kf-rust: #8F3F1E;           /* cuivre brûlé : alerte sur fond clair */
  --kf-rust-light: #D9774A;     /* cuivre brûlé : alerte sur fond sombre */
  --kf-steel-bright: #9DBCC4;   /* acier éclairci : remplissage de jauge sur Encre (contraste 9.1) */
  --kf-red: #B23A2E;            /* rouge profond : fond d'un message critique, texte Écru (contraste 5.2) */
  --kf-red-light: #E0645A;      /* rouge lisible sur Encre (contraste 5.4) */
  --kf-cream-a70: rgba(244, 239, 230, 0.7);
  --kf-cream-a55: rgba(244, 239, 230, 0.55);
  --kf-cream-a40: rgba(244, 239, 230, 0.4);
  --kf-cream-a15: rgba(244, 239, 230, 0.15);
  --kf-cream-a08: rgba(244, 239, 230, 0.08);
  --kf-ink-a60: rgba(23, 20, 15, 0.6);

  /* Surfaces */
  --kf-surface-page: var(--kf-cream);
  --kf-surface-raised: #FAF7F1;
  --kf-surface-sunken: var(--kf-cream-dim);
  --kf-surface-inverse: var(--kf-ink);
  --kf-surface-inverse-raised: var(--kf-ink-soft);

  /* Texte */
  --kf-text: var(--kf-ink);
  --kf-text-muted: var(--kf-ink-a60);
  --kf-text-inverse: var(--kf-cream);
  --kf-text-inverse-muted: var(--kf-cream-a55);

  /* Accents */
  --kf-accent: var(--kf-copper);             /* flux, débit, CTA */
  --kf-accent-strong: var(--kf-copper-dim);
  --kf-accent-on-dark: var(--kf-copper-light);
  --kf-data-cold: var(--kf-steel);           /* lecture froide : niveau des fûts */
  --kf-data-cold-strong: var(--kf-steel-dim);
  --kf-data-cold-on-dark: var(--kf-steel-light);

  /* Bordures */
  --kf-border: var(--kf-line);
  --kf-border-strong: var(--kf-brass);
  --kf-border-inverse: var(--kf-cream-a15);
  --kf-track-inverse: var(--kf-cream-a08);

  /* Jauge de niveau */
  --kf-gauge-level: var(--kf-steel-bright);
  --kf-gauge-level-warning: var(--kf-copper-light);
  --kf-gauge-track: rgba(244, 239, 230, 0.1);  /* pistes discrètes mais perceptibles : les deux anneaux restent visibles */
  --kf-gauge-flow: var(--kf-copper-light);
  --kf-gauge-flow-rest: rgba(208, 143, 90, 0.55); /* dernier débit, au repos */
  --kf-gauge-track-critical: rgba(224, 100, 90, 0.35);

  /* États */
  --kf-status-ok: var(--kf-signal);          /* « sous contrôle » : usage rare, jamais décoratif */
  --kf-status-warning: var(--kf-copper);
  --kf-status-alert: var(--kf-rust);
  --kf-status-alert-on-dark: var(--kf-rust-light);
  --kf-status-critical: var(--kf-red);       /* fût vide : seul rouge de l'interface */
  --kf-status-critical-on-dark: var(--kf-red-light);
  --kf-status-offline: var(--kf-brass);
  --kf-status-offline-on-dark: var(--kf-cream-a40);

  /* Typographie */
  --kf-font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --kf-font-ui: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --kf-font-data: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --kf-text-2xs: 10px;
  --kf-text-xs: 11px;
  --kf-text-sm: 13px;
  --kf-text-md: 14.5px;
  --kf-text-lg: 17px;
  --kf-text-xl: 20px;
  --kf-text-2xl: 26px;
  --kf-text-3xl: 34px;
  --kf-text-4xl: 44px;

  --kf-tracking-eyebrow: 0.14em;
  --kf-tracking-data: 0.06em;

  /* Espacements : échelle 4/8 */
  --kf-space-1: 4px;
  --kf-space-2: 8px;
  --kf-space-3: 12px;
  --kf-space-4: 16px;
  --kf-space-5: 20px;
  --kf-space-6: 24px;
  --kf-space-8: 32px;
  --kf-space-10: 40px;
  --kf-space-12: 48px;
  --kf-space-16: 64px;

  /* Rayons */
  --kf-radius-sm: 8px;
  --kf-radius-md: 14px;
  --kf-radius-lg: 16px;
  --kf-radius-pill: 100px;

  /* Divers */
  --kf-focus-ring: 0 0 0 2px var(--kf-surface-page), 0 0 0 4px var(--kf-copper);
  --kf-transition: 160ms ease;
  /* Animations temps réel : calées sur une mesure par seconde */
  --kf-motion-duration: 750ms;
  --kf-motion-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}