/* ==========================================================================
   PROTOCOLE ZÉRO SALLE — Design Tokens
   Style : premium sportif — base claire façon iOS, encre profonde pour les
   cartes "héros", accent énergique orange → framboise, couleurs sémantiques
   par univers (activité, coach, récompense, santé).
   Tous les couples texte/fond respectent le contraste WCAG AA (≥ 4.5:1).
   ========================================================================== */

:root {
  /* --- Fonds --- */
  --color-bg: #f4f4f8;
  --color-bg-elevated: #fafafd;
  --color-card: #ffffff;
  --color-card-alt: #f7f7fb;

  /* --- Encre (cartes héros, île de navigation) --- */
  --color-ink: #0c0c12;
  --color-ink-soft: #1a1a24;
  --color-ink-line: rgba(255, 255, 255, 0.1);

  /* --- Texte --- */
  --color-text: #0c0c12;
  --color-text-secondary: #55555f;   /* 6.7:1 sur fond */
  --color-text-tertiary: #6b6b75;    /* 4.8:1 sur fond */
  --color-text-on-dark: #f5f5f7;
  --color-text-on-dark-2: rgba(245, 245, 247, 0.72);

  /* --- Accent principal (énergie) --- */
  --color-accent: #cf3a0c;           /* texte/icônes accent sur blanc : 4.9:1 */
  --color-accent-2: #cc1f52;
  --color-accent-bright: #ff6a2b;    /* décoratif uniquement (lueurs, anneaux) */
  --color-accent-tint: #fff0e9;
  --grad-accent: linear-gradient(135deg, #cf3a0c 0%, #cc1f52 100%);
  --grad-accent-bright: linear-gradient(135deg, #ff8a3d 0%, #ff2d6f 100%);

  /* --- Couleurs par univers --- */
  --color-coach: #5b4bdb;            /* coach IA */
  --color-coach-tint: #efedff;
  --color-steps: #0f7ea8;            /* activité / pas */
  --color-steps-bright: #1fb6ff;
  --color-steps-tint: #e6f6fd;
  --color-reward: #8a6200;           /* texte "or" lisible */
  --color-reward-bright: #ffc53d;
  --color-reward-tint: #fff6dc;

  /* --- États --- */
  --color-black: #0c0c12;
  --color-black-soft: #1c1c24;
  --color-red: #ff3b30;
  --color-red-dark: #d70015;
  --color-red-tint: #ffe8e6;
  --color-green: #22c55e;
  --color-green-dark: #12824f;
  --color-green-tint: #e5f8ed;
  --color-gold: #ffc53d;             /* décoratif (fonds, anneaux) — jamais en texte sur blanc */
  --color-blue: #0a6fd8;

  /* --- Mat (logos sobres : calories en blanc mat, cheat meal en noir mat) --- */
  --color-matte-dark: #36363a;       /* fond graphite mat */
  --color-matte-white: #f0f0f1;      /* blanc mat */
  --color-matte-light: #e4e4e7;      /* fond gris mat clair */
  --color-matte-black: #29292c;      /* noir mat */

  /* --- Séparateurs --- */
  --color-hairline: rgba(60, 60, 80, 0.1);
  --color-hairline-strong: rgba(60, 60, 80, 0.2);

  /* --- Rayons --- */
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 999px;

  /* --- Ombres --- */
  --shadow-card: 0 1px 2px rgba(12, 12, 18, 0.04), 0 8px 24px rgba(12, 12, 18, 0.06);
  --shadow-card-hover: 0 2px 4px rgba(12, 12, 18, 0.05), 0 14px 32px rgba(12, 12, 18, 0.1);
  --shadow-float: 0 12px 40px rgba(12, 12, 18, 0.2);
  --shadow-island: 0 10px 34px rgba(12, 12, 18, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  --shadow-accent: 0 10px 26px rgba(207, 58, 12, 0.32);

  /* --- Typographie --- */
  --font-display: -apple-system, "SF Pro Display", system-ui, "Segoe UI", Roboto, sans-serif;
  --font-text: -apple-system, "SF Pro Text", system-ui, "Segoe UI", Roboto, sans-serif;
  --font-mono: "SF Mono", ui-monospace, "Roboto Mono", monospace;

  /* --- Easing façon iOS --- */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* --- Espacements --- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* --- Repères --- */
  --header-h: 64px;
  --island-h: 62px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}