/* ============================================================
   JET ATLAS — Design Tokens (CLAUDE.md v3.2)
   Palette : Luxe Cream Paper — cream + ink + lime accent + gold.
   Pas de rouge.
   ============================================================ */

:root {

  /* ---------- Surfaces — papier crème chaud ------------------ */
  --ja-cream:       #FAF6EE;
  --ja-cream-50:    #FFFAEF;
  --ja-cream-100:   #F4EFE6;
  --ja-paper:       #FFFFFF;
  --ja-paper-glass: rgba(255, 255, 255, 0.72);

  /* ---------- Encre — primaire CTA + texte ------------------ */
  --ja-ink:         #0A0A0A;
  --ja-ink-soft:    #1A1A1A;
  --ja-ink-2:       #1F1F1F;
  --ja-mute:        rgba(10, 10, 10, 0.60);
  --ja-mute-2:      rgba(10, 10, 10, 0.40);
  --ja-grad-ink:    linear-gradient(135deg, #0A0A0A 0%, #1F1F1F 100%);
  --ja-glow-ink:    0 14px 36px -10px rgba(10, 10, 10, 0.45);

  /* ---------- Or — MARRAKECH, prestige ---------------------- */
  --ja-gold:        #C9A96E;
  --ja-gold-light:  #E8C98A;
  --ja-grad-sun:    linear-gradient(135deg, #E8C98A 0%, #C9A96E 100%);
  --ja-glow-gold:   0 10px 30px -8px rgba(201, 169, 110, 0.45);

  /* ---------- Lime — brand accent (du logo) ----------------- */
  --ja-lime:        #DCFF00;
  --ja-lime-soft:   rgba(220, 255, 0, 0.20);
  --ja-lime-line:   rgba(220, 255, 0, 0.55);
  --ja-lime-glow:   0 0 0 3px rgba(220, 255, 0, 0.25);

  /* ---------- Glass (light) --------------------------------- */
  --ja-glass-bg:           rgba(255, 255, 255, 0.65);
  --ja-glass-bg-md:        rgba(255, 255, 255, 0.78);
  --ja-glass-border:       rgba(10, 10, 10, 0.08);
  --ja-glass-border-hover: rgba(10, 10, 10, 0.35);

  /* ---------- Lignes & dividers ----------------------------- */
  --ja-paper-line:         rgba(10, 10, 10, 0.08);
  --ja-paper-line-strong:  rgba(10, 10, 10, 0.16);
  --ja-divider:            rgba(10, 10, 10, 0.06);

  /* ---------- Ombres feutrées ------------------------------- */
  --ja-shadow-sm:  0  8px  20px -10px rgba(10, 10, 10, 0.12);
  --ja-shadow:     0 20px  50px -20px rgba(10, 10, 10, 0.16);
  --ja-shadow-lg:  0 30px  80px -25px rgba(10, 10, 10, 0.18);
  --ja-shadow-xl:  0 40px 100px -30px rgba(10, 10, 10, 0.20);

  /* ---------- Typographie (familles) ------------------------ */
  --ja-font-display:   "Cormorant Garamond", "Times New Roman", serif;
  --ja-font-interface: "Outfit", system-ui, sans-serif;
  --ja-font-body:      "Inter", system-ui, sans-serif;
  --ja-font-data:      "Space Grotesk", "Inter", system-ui, sans-serif;

  /* ---------- Typographie (échelle) ------------------------- */
  --ja-h1: clamp(48px, 7vw, 96px);
  --ja-h2: clamp(34px, 4.5vw, 60px);
  --ja-h3: clamp(22px, 2.6vw, 30px);
  --ja-body-size:  clamp(16px, 1.1vw, 18px);
  --ja-label-size: clamp(11px, 0.85vw, 13px);
  --ja-price-size: clamp(36px, 4vw, 48px);

  --ja-leading-display: 1.02;
  --ja-leading-h2:      1.08;
  --ja-leading-body:    1.75;
  --ja-tracking-label:  0.16em;
  --ja-tracking-h3:     0.04em;

  /* ---------- Transitions ----------------------------------- */
  --ja-ease:          cubic-bezier(0.16, 1, 0.3, 1);
  --ja-duration-fast: 0.15s;
  --ja-duration-base: 0.30s;
  --ja-duration-slow: 0.60s;

  /* ---------- Layout ---------------------------------------- */
  --ja-container: 1280px;
  --ja-gutter:    clamp(1rem, 4vw, 2.5rem);
  --ja-radius-sm: 4px;
  --ja-radius-md: 10px;
  --ja-radius-lg: 18px;
  --ja-radius-xl: 24px;
  --ja-radius-pill: 999px;

  /* ---------- Z-index --------------------------------------- */
  --ja-z-content:   1;
  --ja-z-overlay:   500;
  --ja-z-nav:       1000;
  --ja-z-backdrop:  1999;
  --ja-z-offcanvas: 2000;
}