/* ============================================================
   brand.css — Lumière Medical Aesthetics
   All brand tokens. Edit this file only — never hardcode
   colours, fonts, or spacing values anywhere else.
   ============================================================ */

/* ─── GOOGLE FONTS ─────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Raleway:wght@300;400;500;600;700&display=swap');

/* ─── BRAND TOKENS ─────────────────────────────────────────── */
:root {

  /* Colours */
  --color-primary:       #c9a96e;   /* warm champagne gold — headlines, accents */
  --color-secondary:     #e8c4c4;   /* soft blush rose — secondary accents */
  --color-accent:        #c9a96e;   /* same as primary — CTA buttons, highlights */
  --color-accent-hover:  #e0c08a;   /* lighter gold on hover */
  --color-accent-dark:   #a8844e;   /* deeper gold for pressed states */

  --color-bg:            #0f0d0e;   /* near-black — main page background */
  --color-surface:       #1a1618;   /* slightly lighter — card backgrounds */
  --color-surface-alt:   #221e20;   /* for alternating sections */
  --color-border:        rgba(201,169,110,0.15); /* subtle gold border */
  --color-border-hover:  rgba(201,169,110,0.45); /* gold border on hover */

  --color-text:          #f2ede8;   /* warm off-white — body text */
  --color-text-muted:    rgba(242,237,232,0.58); /* muted body text */
  --color-text-subtle:   rgba(242,237,232,0.35); /* disclaimers, fine print */
  --color-white:         #f2ede8;   /* alias for clarity */

  --color-success:       #7abf8e;   /* form success states */
  --color-error:         #e07c7c;   /* form error states */

  /* Overlay */
  --overlay-dark:        rgba(15,13,14,0.72); /* hero + section overlays */
  --overlay-card:        rgba(15,13,14,0.35); /* card image overlays */

  /* Typography */
  --font-heading:        'Playfair Display', Georgia, serif;
  --font-body:           'Raleway', 'Helvetica Neue', sans-serif;

  /* Font sizes — fluid via clamp() */
  --text-hero:           clamp(44px, 7vw, 80px);
  --text-section:        clamp(30px, 4vw, 52px);
  --text-card-title:     clamp(18px, 2vw, 22px);
  --text-body-lg:        clamp(16px, 1.2vw, 18px);
  --text-body:           16px;
  --text-sm:             14px;
  --text-xs:             12px;
  --text-eyebrow:        11px;

  /* Font weights */
  --weight-light:        300;
  --weight-regular:      400;
  --weight-medium:       500;
  --weight-semibold:     600;
  --weight-bold:         700;

  /* Letter spacing */
  --tracking-eyebrow:    0.22em;
  --tracking-heading:    0.03em;
  --tracking-btn:        0.12em;
  --tracking-body:       0.01em;

  /* Line heights */
  --leading-hero:        0.92;
  --leading-heading:     1.1;
  --leading-body:        1.75;
  --leading-relaxed:     1.85;

  /* Spacing */
  --section-gap:         80px;
  --section-gap-sm:      50px;
  --heading-to-content:  30px;
  --card-padding:        28px;
  --card-padding-sm:     20px;

  /* Borders & Radii */
  --radius-card:         14px;
  --radius-btn:          6px;
  --radius-input:        8px;
  --radius-pill:         100px;
  --radius-circle:       50%;

  /* Shadows */
  --shadow-card:         0 4px 24px rgba(0,0,0,0.35);
  --shadow-card-hover:   0 12px 40px rgba(0,0,0,0.5);
  --shadow-btn:          0 4px 16px rgba(201,169,110,0.25);
  --shadow-popup:        0 24px 80px rgba(0,0,0,0.65), 0 0 60px rgba(201,169,110,0.08);

  /* Layout */
  --max-width:           1100px;
  --max-width-text:      680px;
  --header-height:       110px;

  /* Transitions */
  --transition-fast:     0.15s ease;
  --transition-base:     0.25s ease;
  --transition-slow:     0.35s cubic-bezier(0.16, 1, 0.3, 1);

  /* Z-index scale */
  --z-base:              1;
  --z-header:            100;
  --z-popup:             9999;

  /* Grain overlay opacity */
  --grain-opacity:       0.025;
}

/* ─── DARK MODE NOTE ────────────────────────────────────────── */
/* Lumière uses a fixed dark luxury palette.
   No light mode variant — the brand is intentionally dark.     */