/* ============================================================
   PURE SPA — COLORS & TYPE
   Spa capilar premium · Japanese head-spa ritual
   Load the three brand webfonts (all genuine Google Fonts):
   <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=Montserrat:wght@300;400;500;600&family=Great+Vibes&display=swap" rel="stylesheet">
   ============================================================ */

:root {
  color-scheme: light;

  /* ---- BRAND COLORS ---- */
  --gold:        #C5A143;   /* primary brand · logo · premium accents      */
  --gold-deep:   #B88A2A;   /* button fills · hover · gold contrast        */
  --champagne:   #D8C17A;   /* soft fills · dividers · highlights · glow   */
  --ivory:       #F8F3EA;   /* warm page base                              */
  --white:       #FFFFFF;   /* clean surfaces · cards · inputs             */
  --espresso:    #2B2520;   /* primary text · dark editorial surfaces      */
  --taupe:       #8C7860;   /* secondary text · labels · hairlines         */

  /* ---- TINTS / DERIVED (oklch-harmonious with the palette) ---- */
  --ivory-deep:  #F1E9D9;   /* slightly deeper base / hover on ivory       */
  --line:        #E8E0D0;   /* hairline borders on light surfaces          */
  --espresso-80: rgba(43,37,32,0.80);
  --espresso-60: rgba(43,37,32,0.60);
  --champagne-30:rgba(216,193,122,0.30);
  --gold-15:     rgba(197,161,67,0.15);

  /* ---- SEMANTIC FOREGROUND ---- */
  --fg1: var(--espresso);   /* primary text            */
  --fg2: var(--taupe);      /* secondary text / labels */
  --fg-on-dark:  var(--ivory);
  --fg2-on-dark: var(--taupe);
  --accent: var(--gold);

  /* ---- SEMANTIC SURFACES ---- */
  --bg:        var(--ivory);
  --surface:   var(--white);
  --surface-2: var(--champagne);
  --surface-dark: var(--espresso);

  /* ---- TYPE FAMILIES ---- */
  --font-display: 'Cormorant Garamond', 'Georgia', serif;     /* editorial headlines */
  --font-body:    'Montserrat', 'Helvetica Neue', sans-serif; /* UI · prices · copy  */
  --font-accent:  'Great Vibes', cursive;                     /* signature flourish  */

  /* ---- SPACING (base-4) ---- */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  32px;
  --space-xl:  64px;
  --space-2xl: 128px;

  /* ---- RADIUS ---- */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  16px;
  --radius-pill: 999px;

  /* ---- ELEVATION (warm, low, soft — never harsh black) ---- */
  --shadow-sm: 0 2px 8px rgba(43,37,32,0.06);
  --shadow-md: 0 2px 16px rgba(43,37,32,0.08);
  --shadow-lg: 0 12px 40px rgba(43,37,32,0.12);
  --glow-gold: 0 0 32px rgba(197,161,67,0.35); /* neon-sign halo */

  /* ---- TRACKING ---- */
  --track-tight: -0.01em;
  --track-label: 0.15em;   /* uppercase Montserrat labels */
  --track-wide:  0.25em;   /* hero eyebrows               */
}

/* ============================================================
   SEMANTIC TYPE CLASSES
   Display / headings → Cormorant Garamond
   UI / body / labels → Montserrat
   Signature accent   → Great Vibes (very short phrases only)
   ============================================================ */

.t-display {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 56px;
  line-height: 1.1;
  letter-spacing: var(--track-tight);
  color: var(--fg1);
}
h1, .t-h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 40px;
  line-height: 1.15;
  color: var(--fg1);
}
h2, .t-h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 28px;
  line-height: 1.2;
  color: var(--fg1);
}
h3, .t-h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.3;
  color: var(--fg1);
}
.t-subtitle {  /* eyebrows · labels · section markers */
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--fg2);
}
.t-body, p {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.7;
  color: var(--fg1);
}
.t-small {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.6;
  color: var(--fg2);
}
.t-caption {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg2);
}
.t-price {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--gold-deep);
}
.t-signature {  /* Great Vibes — short phrases only, never body */
  font-family: var(--font-accent);
  font-weight: 400;
  font-size: 48px;
  line-height: 1;
  color: var(--gold);
}