/* =========================================================
   tokens.css — design tokens Meal
   source de vérité : APP_UI_DS_SITE_PROMPT.md
   ========================================================= */

:root {
  /* Rayons */
  --meal-radius-10: 10px;
  --meal-radius-12: 12px;
  --meal-radius-16: 16px;
  --meal-radius-18: 18px;
  --meal-radius-22: 22px;
  --meal-radius-pill: 999px;

  /* Espacements */
  --meal-space-3: 3px;
  --meal-space-4: 4px;
  --meal-space-6: 6px;
  --meal-space-8: 8px;
  --meal-space-12: 12px;
  --meal-space-16: 16px;
  --meal-space-20: 20px;
  --meal-space-24: 24px;
  --meal-space-32: 32px;
  --meal-space-40: 40px;
  --meal-space-56: 56px;
  --meal-space-72: 72px;
  --meal-space-96: 96px;

  /* Tailles structurelles */
  --meal-tap-min: 44px;
  --meal-cta-h: 48px;
  --meal-chip-h: 34px;
  --meal-input-inset: 14px;
  --meal-border-hairline: 0.5px;

  /* Fonds circadiens */
  --meal-bg-morning-top: #CDE1FF;
  --meal-bg-morning-mid: #F4F9FF;
  --meal-bg-morning-bottom: #FFE4BF;

  --meal-bg-top: #E5EEFF;
  --meal-bg-mid: #F7F5F0;
  --meal-bg-bottom: #F5E3C9;

  --meal-bg-evening-top: #D7E4FA;
  --meal-bg-evening-mid: #FFE2C6;
  --meal-bg-evening-bottom: #FFC79E;

  /* Dark (non prioritaire) */
  --meal-bg-dark-top: #0B1016;
  --meal-bg-dark-mid: #101722;
  --meal-bg-dark-bottom: #161E2A;

  /* Accent + sémantiques */
  --meal-accent: #0A84FF;
  --meal-accent-strong: #0069D9;
  --meal-success: #22C55E;
  --meal-warning: #F59E0B;
  --meal-danger: #EF4444;

  /* Graphite — couleur premium des CTA et eyebrows.
     Réduit la dominante bleu iOS sans supprimer l'accent. */
  --meal-ink: #1D1D1F;
  --meal-ink-strong: #111111;
  --meal-ink-hover: #2A2A2C;
  --meal-ink-soft: rgba(29, 29, 31, 0.62);

  /* Gradient signature Meal — placé sur les mots-clés du hero
     (bleu doux → bleu glacé → gris transition → caramel → orange → braise) */
  --meal-grad: linear-gradient(
    92deg,
    #5FAAF5 0%,
    #72B7F0 20%,
    #A0B9C8 34%,
    #D8AE8C 48%,
    #EC9A64 66%,
    #E47A3F 86%,
    #D8612E 100%
  );
  --meal-grad-apple: var(--meal-grad);

  /* Variante conique — utilisée pour le logo en cercle */
  --meal-grad-conic: conic-gradient(
    from 0deg at 50% 50%,
    #EFD862 0%,
    #F0AC4E 10%,
    #F19553 18%,
    #DD7E70 28%,
    #B57E94 42%,
    #6E84BB 55%,
    #4F8AE6 65%,
    #4FA1D2 75%,
    #6FC0B5 83%,
    #C8DC78 92%,
    #EFD862 100%
  );

  /* Texte */
  --meal-text-primary: rgba(15, 23, 42, 0.92);
  --meal-text-secondary: rgba(15, 23, 42, 0.62);
  --meal-text-tertiary: rgba(15, 23, 42, 0.42);
  --meal-text-on-accent: #FFFFFF;

  /* Surfaces */
  --meal-card: rgba(255, 255, 255, 0.72);
  --meal-card-strong: rgba(255, 255, 255, 0.84);
  --meal-glass: rgba(255, 255, 255, 0.48);
  --meal-stroke: rgba(255, 255, 255, 0.38);
  --meal-stroke-soft: rgba(15, 23, 42, 0.08);

  /* Ombres */
  --meal-shadow-soft: 0 2px 8px rgba(15, 23, 42, 0.06);
  --meal-shadow-card: 0 8px 24px rgba(15, 23, 42, 0.10);
  --meal-shadow-hero: 0 24px 60px rgba(15, 23, 42, 0.14);

  /* Transitions */
  --meal-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --meal-dur-micro: 0.12s;
  --meal-dur-press: 0.15s;
  --meal-dur-short: 0.24s;
  --meal-dur-medium: 0.6s;

  /* Layout */
  --meal-container: 1120px;
  --meal-container-narrow: 880px;
  --meal-page-px: 16px;

  /* Z-index */
  --meal-z-header: 50;
  --meal-z-sticky-cta: 60;
  --meal-z-overlay: 80;

  /* Typo */
  --meal-font-sans:
    -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
    "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --meal-font-mono:
    ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;
}

@media (min-width: 768px) {
  :root {
    --meal-page-px: 24px;
  }
}

@media (min-width: 1120px) {
  :root {
    --meal-page-px: 32px;
  }
}