/* =========================================================================
   VELORA — DESIGN TOKENS
   -------------------------------------------------------------------------
   Single source of truth for colours, typography and spacing.
   Change a value here and it updates across the whole site.

   Palette comes from velora-brand/00-GUIDE.md — keep the two in sync.

   NB: the *wording* of the site (headlines, motto, email) lives in the HTML,
   not here. A company selling "be readable by AI" must keep its text in the
   markup, where assistants and crawlers can actually see it.
   ========================================================================= */

:root{

  /* ---- Raw palette (velora-brand/00-GUIDE.md) ---- */
  --marine:            #181F3A;   /* principale / texte */
  --indigo:            #2A3965;   /* dégradé V          */
  --mauve:             #917292;   /* dégradé V          */
  --periwinkle:        #8C8ECD;   /* variante claire    */
  --corail:            #EFBA95;   /* accent / étoile    */
  --corail-deep:       #E2966A;   /* corail profond     */
  --ivoire:            #F2EFE8;   /* fond clair         */

  /* ---- Semantic colour (restyle by repointing these) ---- */
  --surface:           var(--ivoire);
  --surface-alt:       #ECE7DD;                 /* tinted section bands */
  --surface-card:      #ffffff;
  --surface-header:    rgba(242,239,232,.9);    /* sticky bar */

  --text-heading:      var(--marine);
  --text-body:         rgba(24,31,58,.80);
  --text-muted:        rgba(24,31,58,.58);
  --text-inverse:      var(--ivoire);
  --text-accent:       var(--corail-deep);      /* eyebrows, icons, numbers */
  --text-emphasis:     var(--indigo);           /* italic highlights */

  --border:            rgba(24,31,58,.12);
  --border-warm:       rgba(226,150,106,.35);   /* soft coral hairline */

  --action-bg:         var(--marine);
  --action-bg-hover:   var(--indigo);
  --action-text:       var(--ivoire);
  --focus-ring:        var(--corail-deep);
  --selection-bg:      var(--corail);
  --selection-text:    var(--marine);

  /* Chat mockup */
  --bubble-user-bg:    var(--marine);
  --bubble-user-text:  var(--ivoire);
  --bubble-ai-bg:      #ffffff;
  --bubble-ai-text:    rgba(24,31,58,.86);

  /* Ambient glows */
  --glow-cool:         rgba(140,142,205,.22);
  --glow-warm:         rgba(239,186,149,.28);

  /* ---- Typography ---- */
  --font-display:      'Playfair Display', Georgia, serif;
  --font-body:         'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;

  --fs-base:           17px;
  --fs-h1:             clamp(2.1rem, 5vw, 3.4rem);
  --fs-h2:             clamp(1.7rem, 3.4vw, 2.5rem);
  --fs-h3:             1.28rem;
  --fs-lead:           clamp(1.08rem, 1.7vw, 1.24rem);
  --fs-body:           1.02rem;
  --fs-small:          .92rem;
  --fs-eyebrow:        11.5px;

  --lh-tight:          1.12;
  --lh-heading:        1.2;
  --lh-body:           1.7;

  --fw-light:          300;
  --fw-regular:        400;
  --fw-medium:         500;
  --fw-semibold:       600;

  --ls-eyebrow:        .24em;
  --ls-button:         .05em;

  /* ---- Layout & spacing ---- */
  --page-max:          1120px;
  --page-narrow:       720px;
  --page-gutter:       6vw;
  --measure:           58ch;

  --section-y:         clamp(72px, 11vw, 120px);
  --section-y-sm:      64px;

  /* ---- Shape, depth, motion ---- */
  --radius-sm:         14px;
  --radius-card:       20px;
  --radius-pill:       999px;

  --shadow-soft:       0 10px 30px rgba(24,31,58,.07);
  --shadow-card:       0 14px 40px rgba(24,31,58,.10);
  --shadow-button:     0 8px 22px rgba(24,31,58,.16);

  --ease:              .22s ease;
}