/* ============================================================
   Myrrae — Color & Type Tokens
   Source of truth: https://www.myrrae.com/ (inline <style> in <head>)
   ============================================================ */

/* Webfonts — both loaded from Google Fonts on the live site.
   If you need a fully-offline build, host the .woff2 files locally. */
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=DM+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap");

:root {
  /* ---------- Brand colors ---------- */
  --myrrae-green:        #2e6148;   /* primary — buttons, headings on bg, brand */
  --myrrae-green-700:    #244c39;   /* hover / pressed */
  --myrrae-green-300:    #6a9080;   /* muted brand on light */
  --myrrae-green-20:     rgba(46, 97, 72, 0.20); /* hairline borders */
  --myrrae-green-15:     rgba(46, 97, 72, 0.15); /* fixed header on hero (#2e614826 ≈ 15%) */

  --myrrae-orange:       #c2855a;   /* accent — copper / terracotta; "Essaye." word, Try-On btn */
  --myrrae-orange-700:   #a86d44;
  --myrrae-orange-30:    rgba(194, 133, 90, 0.30); /* feature-card border */

  --myrrae-bg:           #faf9f6;   /* base page bg — warm cream */
  --myrrae-bg-card:      #ffffff;   /* card surface */
  --myrrae-sage:         #e0e7e3;   /* secondary section bg — soft green-gray */

  --myrrae-ink:          #1a1714;   /* body text — near-black, warm */
  --myrrae-ink-muted:    #6b6660;   /* secondary text */
  --myrrae-ink-soft:     #9a948c;   /* tertiary / disabled */

  /* ---------- Semantic foreground tokens ---------- */
  --fg-1:                var(--myrrae-ink);        /* primary text */
  --fg-2:                var(--myrrae-ink-muted);  /* body secondary */
  --fg-3:                var(--myrrae-ink-soft);   /* captions, placeholders */
  --fg-brand:            var(--myrrae-green);
  --fg-accent:           var(--myrrae-orange);
  --fg-inverse:          #ffffff;

  /* ---------- Semantic background tokens ---------- */
  --bg-page:             var(--myrrae-bg);
  --bg-section-alt:      var(--myrrae-sage);
  --bg-card:             var(--myrrae-bg-card);
  --bg-hero-header:      var(--myrrae-green-15);

  /* ---------- Borders & dividers ---------- */
  --border-hairline:     var(--myrrae-green-20);
  --border-feature:      var(--myrrae-orange-30);

  /* ---------- Type families ---------- */
  --font-display:        "Cormorant Garamond", "EB Garamond", Garamond, serif;
  --font-body:           "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* ---------- Type scale (px) ----------
     Sourced from observed Tailwind classes on myrrae.com:
     hero serif uses 7xl/9xl (72-128); section headings 4xl (36);
     body 18-20; meta/eyebrow 14. */
  --t-display-xl:        128px;   /* "Decouvre. / Essaye. / Inspire." */
  --t-display-lg:         72px;
  --t-display-md:         44px;   /* serif section intros */
  --t-display-sm:         32px;
  --t-h1:                 36px;   /* "Découvre Myrrae" */
  --t-h2:                 24px;
  --t-h3:                 20px;   /* feature card titles */
  --t-body:               18px;
  --t-body-sm:            16px;
  --t-meta:               14px;
  --t-eyebrow:            12px;

  /* ---------- Weights ---------- */
  --w-regular:            400;
  --w-medium:             500;
  --w-bold:               700;

  /* ---------- Line heights ---------- */
  --lh-display:           0.9;    /* tight, used on the hero stack */
  --lh-tight:             1.15;
  --lh-snug:              1.3;
  --lh-normal:            1.55;

  /* ---------- Spacing ---------- */
  --space-0:              4px;
  --space-1:              8px;
  --space-2:              12px;
  --space-3:              16px;
  --space-4:              24px;
  --space-5:              32px;
  --space-6:              48px;
  --space-7:              64px;
  --space-8:              96px;

  /* ---------- Radii ----------
     Note: Myrrae uses VERY generous corner radii — phone screens & hero cards
     go up to 3rem (48px). Buttons use 8px lg-rounded or full pills. */
  --radius-sm:            8px;    /* contact button "rounded-lg" */
  --radius-md:            16px;   /* white feature cards "rounded-2xl" */
  --radius-lg:            24px;
  --radius-xl:            40px;   /* image tiles "rounded-[2.5rem]" */
  --radius-2xl:           48px;   /* phone screens "rounded-[3rem]" */
  --radius-pill:          9999px; /* primary CTA "ACHETER chez Marque" */

  /* ---------- Shadows ---------- */
  --shadow-sm:            0 1px 2px rgba(26, 23, 20, 0.04);
  --shadow-card:          0 4px 12px rgba(26, 23, 20, 0.06);          /* feature cards */
  --shadow-lift:          0 10px 30px rgba(26, 23, 20, 0.10);         /* image tiles */
  --shadow-header:        0 4px 15px rgb(224, 231, 227);              /* scrolled header */
  --shadow-fab:           0 12px 28px rgba(46, 97, 72, 0.28);

  /* ---------- Motion ----------
     Site uses 300ms transitions on header, 500ms on image hover, and
     `hover:scale-105` (1.05x) on CTAs. */
  --ease-out:             cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:          cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:             150ms;
  --dur-base:             300ms;
  --dur-slow:             500ms;

  /* ---------- Layout ---------- */
  --container-max:        1280px;   /* Tailwind max-w-7xl */
  --container-pad:        24px;     /* px-6 */
  --header-h:             96px;     /* h-24 default */
  --header-h-scrolled:    80px;     /* .scrolled override */
}

/* ============================================================
   Semantic typography utilities
   ============================================================ */
body {
  font-family: var(--font-body);
  background: var(--bg-page);
  color: var(--fg-1);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.serif        { font-family: var(--font-display); font-weight: var(--w-regular); }
.serif-italic { font-family: var(--font-display); font-style: italic; font-weight: var(--w-regular); }

.t-display-xl { font: italic var(--w-regular) var(--t-display-xl) / var(--lh-display) var(--font-display); }
.t-display-lg { font: italic var(--w-regular) var(--t-display-lg) / var(--lh-display) var(--font-display); }
.t-display-md { font: var(--w-regular) var(--t-display-md) / var(--lh-tight) var(--font-display); }
.t-display-sm { font: var(--w-regular) var(--t-display-sm) / var(--lh-tight) var(--font-display); }

.t-h1         { font: var(--w-bold) var(--t-h1) / var(--lh-tight)  var(--font-body); letter-spacing: -0.01em; }
.t-h2         { font: var(--w-bold) var(--t-h2) / var(--lh-snug)   var(--font-body); }
.t-h3         { font: var(--w-bold) var(--t-h3) / var(--lh-snug)   var(--font-body); }

.t-body       { font: var(--w-regular) var(--t-body)    / var(--lh-normal) var(--font-body); }
.t-body-sm    { font: var(--w-regular) var(--t-body-sm) / var(--lh-normal) var(--font-body); }
.t-meta       { font: var(--w-regular) var(--t-meta)    / var(--lh-snug)   var(--font-body); color: var(--fg-2); }
.t-eyebrow    { font: var(--w-bold) var(--t-eyebrow) / 1 var(--font-body); letter-spacing: 0.2em; text-transform: uppercase; }

/* The signature "outline" headline treatment — empty fill, brand stroke. */
.text-outline {
  -webkit-text-stroke: 1.5px var(--myrrae-green);
  color: transparent;
}

/* Convenience helpers */
.italic-pretty { font-style: italic; text-wrap: pretty; }
.muted         { color: var(--fg-2); }
.soft          { color: var(--fg-3); }
.on-brand      { color: var(--fg-brand); }
.on-accent     { color: var(--fg-accent); }
