/* ============ Vera Studio · Design tokens v6 (light par défaut, dark disponible) ============ */

:root {
  color-scheme: light;

  /* ---- Couleurs (mode clair, par défaut) ---- */
  --bg:              #F7F5EE;   /* fond papier légèrement chaud, style tmoo */
  --bg-elev:         #FFFFFF;   /* surfaces blanches (cards, mockups) */
  --bg-soft:         #EFEBDF;   /* hover, sections alternées */
  --line:            rgba(20, 20, 20, 0.10);
  --line-strong:     rgba(20, 20, 20, 0.22);

  --text:            #141414;   /* noir profond pour tout le texte */
  --text-dim:        #4A4A4A;
  --text-muted:      #6A6A6A;

  /* Bleu Vera (remplace l'orange terracotta de tmoo) */
  --accent:          #1D6FC4;
  --accent-hover:    #164F8C;
  --accent-soft:     rgba(29, 111, 196, 0.10);
  --accent-glow:     rgba(29, 111, 196, 0.22);

  --lime:            var(--accent);
  --lime-hover:      var(--accent-hover);
  --lime-soft:       var(--accent-soft);
  --lime-glow:       var(--accent-glow);

  /* ---- Typographies ---- */
  --font-display: "Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-text:    "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* ---- Échelle fluide (clamp) ---- */
  --fs-xs:    0.75rem;
  --fs-sm:    clamp(0.813rem, 0.78rem + 0.16vw, 0.875rem);
  --fs-base:  clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --fs-lg:    clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);
  --fs-xl:    clamp(1.5rem, 1.25rem + 1.2vw, 2rem);
  --fs-2xl:   clamp(2rem, 1.5rem + 2.5vw, 3.25rem);
  --fs-3xl:   clamp(2.75rem, 1.8rem + 4.5vw, 4.75rem);
  --fs-hero:  clamp(3.25rem, 1.8rem + 8vw, 8rem);
  --fs-mega:  clamp(4.5rem, 2rem + 14vw, 12rem);

  /* ---- Line-heights ---- */
  --lh-tight:  0.92;
  --lh-title:  1.02;
  --lh-heading:1.1;
  --lh-body:   1.6;

  /* ---- Espacements ---- */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.25rem;
  --sp-6:  1.5rem;
  --sp-7:  1.75rem;
  --sp-8:  2rem;
  --sp-9:  2.25rem;
  --sp-10: 2.5rem;
  --sp-11: 2.75rem;
  --sp-12: 3rem;
  --sp-14: 3.5rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;
  --sp-32: 8rem;
  --sp-40: 10rem;

  --sec-y: clamp(5rem, 3rem + 6vw, 10rem);
  --gut:   clamp(1.25rem, 1rem + 2vw, 2.5rem);

  --wrap-max: 1440px;

  /* ---- Bordures ---- */
  --br-sm: 6px;
  --br-md: 12px;
  --br-lg: 20px;
  --br-xl: 28px;
  --br-pill: 999px;

  /* ---- Transitions ---- */
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 180ms;
  --dur-med:  340ms;
  --dur-slow: 700ms;
}

/* ============ MODE SOMBRE (opt-in) ============ */
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg:              #0F1520;
  --bg-elev:         #171F2D;
  --bg-soft:         #1F2939;
  --line:            rgba(255, 255, 255, 0.09);
  --line-strong:     rgba(255, 255, 255, 0.20);

  --text:            #F5F7FA;
  --text-dim:        #B4BCC9;
  --text-muted:      #7C8697;

  --accent:          #A5D0F5;
  --accent-hover:    #7DBAE8;
  --accent-soft:     rgba(165, 208, 245, 0.14);
  --accent-glow:     rgba(165, 208, 245, 0.35);

  --lime:            var(--accent);
  --lime-hover:      var(--accent-hover);
  --lime-soft:       var(--accent-soft);
  --lime-glow:       var(--accent-glow);
}