/* ============================================================
   NOUVELAGE® AESTHETIC CLINICS — COLORS & TYPE
   Editorial luxury. Warm browns, cream canvas, restrained accents.
   ============================================================ */

/* -----------------------------------------------------------
   FONTS — load before applying
   ----------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,600;1,800&family=DM+Sans:wght@300;400;500;600;700&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&family=Italiana&family=Manrope:wght@300;400;500;600;700&family=Italianno&family=Pinyon+Script&family=Allura&display=swap');

:root {
  /* ===========================================================
     CORE BRAND PALETTE (5)
     60% Cream · 30% Caramel · 10% Espresso  + Taupe / Peach accents
     =========================================================== */
  --color-espresso: #58382C;   /* Primary · headlines · anchor */
  --color-caramel:  #9E6E4A;   /* Brand · buttons · links */
  --color-taupe:    #C3A494;   /* Secondary · surfaces */
  --color-cream:    #FCF5F0;   /* Canvas · backgrounds */
  --color-peach:    #FFD4B4;   /* Accent · highlights */

  /* ===========================================================
     EXTENDED PALETTE
     =========================================================== */
  --color-bark:     #5E4025;   /* Deepest editorial brown */
  --color-mocha:    #755644;   /* Body text on cream */
  --color-nude:     #957063;   /* Mid-tone */
  --color-bone:     #E9E0DB;   /* Tertiary surface, dividers */
  --color-ash:      #686665;   /* Quiet labels, captions */
  --color-white:    #FFFFFF;

  /* ===========================================================
     ACCENT — TERRACOTTA / ORGAN
     The primary action colour used on nouvelage.clinic.
     Burnt terracotta. Buttons · nav CTA · active filters.
     =========================================================== */
  --color-accent:       #C56B33;   /* Primary action — terracotta */
  --color-accent-dark:  #A85426;   /* Hover / pressed state */
  --color-accent-light: #D98A52;   /* On-dark highlights */
  --color-accent-deep:  #8E4420;   /* Gradient terminus, deep shade */

  /* ===========================================================
     GOLD SCALE
     Warm editorial gold used for eyebrows, stats, display nums.
     =========================================================== */
  --color-gold:         #C6A26A;   /* Mid gold — eyebrow lines, rule */
  --color-gold-dark:    #A37E42;   /* Tag labels, hover underlines */
  --color-gold-light:   #D9BF94;   /* On-dark text, hero eyebrow */

  /* ===========================================================
     CLINIC SITE NEUTRALS
     Expanded neutral ramp from nouvelage.clinic.
     =========================================================== */
  --color-ink:          #1E1E1E;   /* Near-black headlines */
  --color-brown:        #3A3028;   /* Dark editorial brown */
  --color-espresso-2:   #2A211B;   /* Deeper espresso (site bg) */
  --color-text:         #46392F;   /* Body copy */
  --color-muted:        #8A7C6C;   /* Captions, meta */
  --color-paper:        #FBF8F2;   /* Warm white cards */
  --color-sand:         #EBE5DB;   /* Sand surface */
  --color-beige:        #D9CCBC;   /* Beige divider tone */

  /* ===========================================================
     SEMANTIC TOKENS — foreground
     =========================================================== */
  --fg-primary:   var(--color-espresso); /* h1–h4, anchors */
  --fg-secondary: var(--color-mocha);    /* body copy */
  --fg-muted:     var(--color-ash);      /* captions, meta */
  --fg-brand:     var(--color-caramel);  /* eyebrows, links, buttons */
  --fg-accent:    var(--color-peach);    /* on-dark highlights */
  --fg-on-dark:   var(--color-cream);    /* text on espresso */
  --fg-script:    var(--color-caramel);  /* signature script colour */

  /* ===========================================================
     SEMANTIC TOKENS — background
     =========================================================== */
  --bg-canvas:    var(--color-cream);   /* default page bg */
  --bg-surface:   var(--color-white);   /* cards, panels */
  --bg-elevated:  var(--color-bone);    /* tertiary surface */
  --bg-inverse:   var(--color-espresso);/* dark sections */
  --bg-editorial: var(--color-bark);    /* deepest dark */

  /* ===========================================================
     SEMANTIC TOKENS — border
     =========================================================== */
  --border-subtle:  rgba(88, 56, 44, 0.08);
  --border-default: rgba(88, 56, 44, 0.12);
  --border-strong:  rgba(88, 56, 44, 0.25);
  --border-on-dark: rgba(252, 245, 240, 0.20);

  /* ===========================================================
     TYPOGRAPHY — families
     The Seasons (proprietary, paid) is substituted with Playfair
     Display for screen. Both share high-contrast didone DNA.
     =========================================================== */
  /* display: Italiana — high elegance, used on nouvelage.clinic headlines */
  --font-display: 'Italiana', 'Playfair Display', 'The Seasons', Georgia, serif;
  /* serif: Cormorant Garamond — editorial body serif (clinic site); Playfair as fallback */
  --font-serif:  'Cormorant Garamond', 'Playfair Display', 'The Seasons', Georgia, serif;
  /* sans: Manrope (clinic site) with DM Sans fallback */
  --font-sans:   'Manrope', 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-script: 'Italianno', 'Pinyon Script', 'Allura', cursive;
  --font-mono:   'Courier New', ui-monospace, monospace;

  /* ===========================================================
     TYPOGRAPHY — semantic roles
     Use these directly; do not invent new sizes.
     =========================================================== */
  /* Display / headlines (serif, near-zero line-height) */
  --type-h1-size: clamp(56px, 11vw, 168px);
  --type-h1-lh:   0.92;
  --type-h1-ls:   -0.03em;

  --type-h2-size: clamp(36px, 6vw, 84px);
  --type-h2-lh:   1.0;
  --type-h2-ls:   -0.025em;

  --type-h3-size: clamp(28px, 3.2vw, 44px);
  --type-h3-lh:   1.05;
  --type-h3-ls:   -0.02em;

  --type-h4-size: clamp(20px, 2vw, 26px);
  --type-h4-lh:   1.2;
  --type-h4-ls:   -0.01em;

  /* Body (sans) */
  --type-lead-size: 20px;
  --type-lead-lh:   1.55;

  --type-body-size: 16px;
  --type-body-lh:   1.65;

  --type-caption-size: 14px;
  --type-caption-lh:   1.5;

  /* UI labels — small, all-caps, wide tracking */
  --type-eyebrow-size: 11px;
  --type-eyebrow-ls:   0.32em;
  --type-eyebrow-lh:   1.4;

  --type-label-size: 12px;
  --type-label-ls:   0.18em;

  /* Signature (script — one per layout, max) */
  --type-script-hero: clamp(54px, 7vw, 96px);
  --type-script-tag:  clamp(36px, 4vw, 56px);
  --type-script-small: 28px;

  /* ===========================================================
     RADII — restrained. Sharp editorial corners + pill buttons.
     =========================================================== */
  --radius-none:  0;
  --radius-sm:    2px;   /* image cards, swatches */
  --radius-md:    4px;   /* default card */
  --radius-lg:    12px;  /* phone/social mockups */
  --radius-xl:    18px;  /* hero containers, large blocks */
  --radius-pill:  999px; /* buttons, badges, tabs */

  /* ===========================================================
     SHADOWS — long, soft, brown-tinted. Never grey.
     =========================================================== */
  --shadow-xs: 0 4px 12px -4px rgba(88, 56, 44, 0.08);
  --shadow-sm: 0 12px 32px -12px rgba(88, 56, 44, 0.15);
  --shadow-md: 0 12px 32px -8px rgba(88, 56, 44, 0.18);
  --shadow-lg: 0 30px 60px -20px rgba(88, 56, 44, 0.20);
  --shadow-xl: 0 30px 60px -20px rgba(88, 56, 44, 0.35);

  /* ===========================================================
     SPACING — generous editorial whitespace
     =========================================================== */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 56px;
  --space-16: 80px;
  --space-20: 120px;
  --section-y: clamp(80px, 12vw, 160px); /* @kind spacing */
  --gutter:    clamp(20px, 4vw, 56px);    /* @kind spacing */
  --max-w:     1320px;

  /* ===========================================================
     MOTION — slow, eased, cinematic. Never bouncy.
     =========================================================== */
  --ease-out:   cubic-bezier(0.2, 0.8, 0.2, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.4, 0.0, 0.2, 1); /* @kind other */
  --dur-fast:  200ms;  /* @kind other */
  --dur-base:  300ms;  /* @kind other */
  --dur-slow:  600ms;  /* @kind other */
  --dur-reveal: 900ms; /* @kind other */
}

/* ============================================================
   BASE / RESET
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--bg-canvas);
  color: var(--fg-primary);
  font-size: var(--type-body-size);
  line-height: var(--type-body-lh);
  font-weight: 400;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
::selection { background: var(--color-caramel); color: var(--color-cream); }

/* ============================================================
   SEMANTIC TYPE — apply directly via class or element
   ============================================================ */
h1, .h1 {
  font-family: var(--font-serif);
  font-size: var(--type-h1-size);
  line-height: var(--type-h1-lh);
  letter-spacing: var(--type-h1-ls);
  font-weight: 400;
  color: var(--fg-primary);
}
h2, .h2 {
  font-family: var(--font-serif);
  font-size: var(--type-h2-size);
  line-height: var(--type-h2-lh);
  letter-spacing: var(--type-h2-ls);
  font-weight: 400;
  color: var(--fg-primary);
}
h3, .h3 {
  font-family: var(--font-serif);
  font-size: var(--type-h3-size);
  line-height: var(--type-h3-lh);
  letter-spacing: var(--type-h3-ls);
  font-weight: 500;
  color: var(--fg-primary);
}
h4, .h4 {
  font-family: var(--font-serif);
  font-size: var(--type-h4-size);
  line-height: var(--type-h4-lh);
  letter-spacing: var(--type-h4-ls);
  font-weight: 600;
  color: var(--fg-primary);
}

p, .body {
  font-family: var(--font-sans);
  font-size: var(--type-body-size);
  line-height: var(--type-body-lh);
  color: var(--fg-secondary);
}
.lead {
  font-family: var(--font-sans);
  font-size: var(--type-lead-size);
  line-height: var(--type-lead-lh);
  color: var(--fg-secondary);
  max-width: 56ch;
}
.caption {
  font-family: var(--font-sans);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-lh);
  color: var(--fg-muted);
}

/* Italic editorial subhead — used inside hero accents */
.serif-italic {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
}

.eyebrow {
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: var(--type-eyebrow-ls);
  font-size: var(--type-eyebrow-size);
  line-height: var(--type-eyebrow-lh);
  font-weight: 500;
  color: var(--fg-brand);
}

.label {
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: var(--type-label-ls);
  font-size: var(--type-label-size);
  font-weight: 600;
  color: var(--fg-muted);
}

.script {
  font-family: var(--font-script);
  font-size: var(--type-script-tag);
  line-height: 0.9;
  font-weight: 400;
  color: var(--fg-script);
}
.script--hero { font-size: var(--type-script-hero); }
.script--small { font-size: var(--type-script-small); }

/* Section number eyebrow — "01 — Logo" pattern */
.section-num {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 14px;
  color: var(--fg-brand);
  letter-spacing: 0.05em;
}
.section-num::before {
  content: '';
  display: inline-block;
  width: 32px;
  height: 1px;
  background: currentColor;
  vertical-align: middle;
  margin-right: 12px;
}

/* ============================================================
   GRADIENT TYPE — for hero accents only.
   Espresso → Caramel → Taupe across the wordmark family.
   ============================================================ */
.gradient-text {
  background: linear-gradient(95deg,
    var(--color-espresso) 0%,
    var(--color-espresso) 35%,
    var(--color-caramel)  55%,
    var(--color-taupe)    85%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.gradient-text--on-dark {
  background: linear-gradient(95deg,
    var(--color-cream),
    var(--color-peach) 55%,
    var(--color-taupe) 85%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Outlined italic for hero "stroke" word — used sparingly */
.stroke-italic {
  -webkit-text-stroke: 1px var(--color-espresso);
  -webkit-text-fill-color: transparent;
  font-style: italic;
  font-family: var(--font-serif);
}

/* ============================================================
   BUTTONS — pill shape, all-caps micro-label
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 32px;
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--dur-base) var(--ease-out);
  text-decoration: none;
}
.btn--primary {
  background: var(--color-espresso);
  color: var(--color-cream);
}
.btn--primary:hover {
  background: color-mix(in srgb, var(--color-espresso) 82%, #000);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.btn--ghost {
  background: transparent;
  color: var(--color-espresso);
  border-color: var(--border-strong);
}
.btn--ghost:hover {
  border-color: var(--color-espresso);
  background: rgba(88, 56, 44, 0.04);
}
.btn--brand {
  background: var(--color-caramel);
  color: var(--color-cream);
}
.btn--brand:hover {
  background: var(--color-bark);
}

/* ============================================================
   CARD — default editorial card
   ============================================================ */
.card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 32px;
}

/* ============================================================
   UTILITY
   ============================================================ */
.container { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: var(--section-y) 0; }