/* ═══════════════════════════════════════════════════════════════
   JANAA — DESIGN TOKENS
   Premium Editorial × Industrial Pro
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ── COLORS ─────────────────────────────────────────────────── */
  /* Signature Vert Janaa */
  --color-vert-50:   #ECFAF1;
  --color-vert-100:  #D1F2DD;
  --color-vert-200:  #A6E5BB;
  --color-vert-300:  #76D597;
  --color-vert-400:  #4FC579;
  --color-vert-500:  #3DB565;   /* PRIMARY — vert logo */
  --color-vert-600:  #2E9450;
  --color-vert-700:  #1F6F3A;
  --color-vert-800:  #134A26;
  --color-vert-900:  #0E2F19;

  /* Charbon / Greys — base neutre BTP */
  --color-ink-50:    #FAFAF7;   /* warm white */
  --color-ink-100:   #F2F0EA;
  --color-ink-200:   #E5E2D8;
  --color-ink-300:   #C7C4B8;
  --color-ink-400:   #9A968A;
  --color-ink-500:   #6B7280;
  --color-ink-600:   #4A4F58;
  --color-ink-700:   #2A2E36;
  --color-ink-800:   #18191F;
  --color-ink-900:   #0A0B0F;   /* charbon profond */

  /* Accents */
  --color-amber:     #FFC60C;   /* jaune chantier — utilisé rarement */
  --color-amber-soft:#FFE08A;
  --color-red:       #E5484D;   /* alertes seules */

  /* Sémantique */
  --bg:              var(--color-ink-50);
  --bg-elevated:     #FFFFFF;
  --bg-deep:         var(--color-ink-900);
  --bg-deep-2:       var(--color-ink-800);
  --fg:              var(--color-ink-900);
  --fg-muted:        var(--color-ink-500);
  --fg-subtle:       var(--color-ink-400);
  --fg-on-deep:      var(--color-ink-50);
  --accent:          var(--color-vert-500);
  --accent-deep:     var(--color-vert-700);

  /* Hairlines (anti-grey-border) */
  --line:            color-mix(in srgb, var(--color-ink-900) 8%, transparent);
  --line-strong:     color-mix(in srgb, var(--color-ink-900) 14%, transparent);
  --line-on-deep:    color-mix(in srgb, #fff 8%, transparent);

  /* ── TYPOGRAPHY ─────────────────────────────────────────────── */
  --font-display:    'Clash Display', 'Geist', 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-body:       'Plus Jakarta Sans', 'Geist', system-ui, sans-serif;
  --font-mono:       'JetBrains Mono', 'Geist Mono', ui-monospace, monospace;

  /* Type scale — fluid clamp() pour responsive */
  --fs-xs:    0.75rem;
  --fs-sm:    0.875rem;
  --fs-base:  1rem;
  --fs-lg:    1.125rem;
  --fs-xl:    1.25rem;
  --fs-2xl:   1.5rem;
  --fs-3xl:   1.875rem;
  --fs-4xl:   clamp(2rem, 2vw + 1.5rem, 2.5rem);
  --fs-5xl:   clamp(2.5rem, 3vw + 1.5rem, 3.5rem);
  --fs-6xl:   clamp(3rem, 4vw + 1.5rem, 4.5rem);
  --fs-display:clamp(3.5rem, 7vw + 1rem, 8rem);   /* hero H1 */

  /* Line heights */
  --lh-tight:  1.05;
  --lh-snug:   1.2;
  --lh-normal: 1.5;
  --lh-relaxed:1.65;

  /* Letter-spacing */
  --ls-tighter: -0.04em;
  --ls-tight:   -0.02em;
  --ls-normal:  0;
  --ls-wide:    0.05em;
  --ls-wider:   0.12em;     /* eyebrow tags */
  --ls-widest:  0.2em;

  /* ── SPACING (macro-whitespace) ─────────────────────────────── */
  --s-1:   0.25rem;
  --s-2:   0.5rem;
  --s-3:   0.75rem;
  --s-4:   1rem;
  --s-6:   1.5rem;
  --s-8:   2rem;
  --s-12:  3rem;
  --s-16:  4rem;
  --s-20:  5rem;
  --s-24:  6rem;
  --s-32:  8rem;
  --s-40:  10rem;
  --s-48:  12rem;

  /* Section vertical padding (massif comme demandé) */
  --section-py: clamp(5rem, 10vw, 10rem);

  /* Container */
  --container:   1280px;
  --container-x: clamp(1.25rem, 4vw, 3rem);

  /* ── RADIUS (exaggerated squircle) ──────────────────────────── */
  --r-1:   0.25rem;
  --r-2:   0.5rem;
  --r-3:   0.75rem;
  --r-4:   1rem;
  --r-6:   1.5rem;
  --r-8:   2rem;
  --r-pill:9999px;

  /* Nested radius (calc inner from outer - padding) */
  --r-outer:  2rem;
  --r-inner:  calc(var(--r-outer) - 0.375rem);

  /* ── SHADOWS (ambient soft, no harsh dark) ──────────────────── */
  --shadow-xs:   0 1px 2px color-mix(in srgb, var(--color-ink-900) 4%, transparent);
  --shadow-sm:   0 2px 8px color-mix(in srgb, var(--color-ink-900) 6%, transparent);
  --shadow-md:   0 8px 24px color-mix(in srgb, var(--color-ink-900) 8%, transparent);
  --shadow-lg:   0 24px 48px -8px color-mix(in srgb, var(--color-ink-900) 10%, transparent);
  --shadow-xl:   0 32px 80px -12px color-mix(in srgb, var(--color-ink-900) 14%, transparent);

  /* Inner highlights pour double-bezel */
  --inset-light: inset 0 1px 1px color-mix(in srgb, #fff 60%, transparent);
  --inset-deep:  inset 0 1px 1px color-mix(in srgb, #fff 8%, transparent);

  /* ── MOTION ─────────────────────────────────────────────────── */
  --ease-spring:    cubic-bezier(0.32, 0.72, 0, 1);
  --ease-out-soft:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-soft:   cubic-bezier(0.7, 0, 0.84, 0);
  --ease-bounce:    cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-quick:      200ms;
  --dur-base:       400ms;
  --dur-slow:       700ms;
  --dur-slower:     1000ms;

  /* ── Z-INDEX (systemic only) ────────────────────────────────── */
  --z-sticky:  20;
  --z-overlay: 40;
  --z-modal:   50;
  --z-toast:   60;
  --z-noise:   70;
}

/* ── DARK SECTIONS (charbon backgrounds) ──────────────────────── */
.theme-deep {
  --bg:           var(--color-ink-900);
  --bg-elevated:  var(--color-ink-800);
  --fg:           var(--color-ink-50);
  --fg-muted:     var(--color-ink-400);
  --fg-subtle:    var(--color-ink-500);
  --line:         var(--line-on-deep);
}