/* ==========================================================================
   SUNSHINE AESTHETIC CLINIC — DESIGN TOKENS
   Tuned to the physical clinic: sculpted ivory plaster, brass line-art,
   honey wood, botanical relief — and emerald velvet as rare punctuation.
   Murmurs wealth rather than shouting it — five-star suite, not billboard.
   ========================================================================== */

:root {

  /* -----------------------------------------------------------------------
     COLOR — Palette
     Ordered by how much of the room they own. See --ratio note below.
     ----------------------------------------------------------------------- */
  --color-butter-cream:    #F3F0D7; /* primary background — the walls */
  --color-warm-alabaster:  #EAE3D6; /* secondary surface — sculpted plaster relief; replaces white entirely */
  --color-champagne-tan:   #D8B384; /* daily warm accent — CTAs, dividers, foil (pairs with logo gold) */
  --color-whisper-mint:    #CEE5D0; /* soft accent — botanical relief, story frames, wellness moments */
  --color-cocoa-ink:       #3B2A2E; /* body text + dark anchor — softer than pure black, replaces black in all large fills */
  --color-rosewood:        #5E454B; /* authority colour — headers, covers, footers, hero panels */
  --color-velvet-emerald:  #22483B; /* PUNCTUATION ONLY — the velvet furniture. Max ~3% of any screen. */

  /* Gold Leaf — the brass line-art and logo. Foil moments only, never a field. */
  --gradient-gold-leaf: linear-gradient(135deg, #A9791F 0%, #E9CE8C 45%, #C9A24D 100%);

  /* Mint gradient — signature botanical depth */
  --gradient-mint: linear-gradient(180deg, #E7EFE1 0%, #CEE5D0 50%, #A8C0AA 100%);

  /* Tints / shades (derived, for hover & elevation states) */
  --color-champagne-tan-10:  rgba(216, 179, 132, 0.10);
  --color-champagne-tan-20:  rgba(216, 179, 132, 0.20);
  --color-champagne-tan-deep:#BE955F; /* hover/active state for tan fills */
  --color-whisper-mint-10:   rgba(206, 229, 208, 0.35);
  --color-cocoa-ink-60:      rgba(59, 42, 46, 0.60);
  --color-cocoa-ink-30:      rgba(59, 42, 46, 0.30);
  --color-cocoa-ink-10:      rgba(59, 42, 46, 0.10);
  --color-rosewood-80:       rgba(94, 69, 75, 0.85); /* rosewood panel over imagery */
  --color-rosewood-10:       rgba(94, 69, 75, 0.10);
  --color-velvet-emerald-deep:#1A382E; /* hover/active for the rare emerald fill */
  --color-velvet-emerald-10: rgba(34, 72, 59, 0.10);

  /* Semantic color roles */
  --color-bg-primary:      var(--color-butter-cream);
  --color-bg-surface:      var(--color-warm-alabaster); /* use instead of white — the clinic has no stark white */
  --color-bg-signature:    var(--color-whisper-mint);
  --color-bg-authority:    var(--color-rosewood);
  --color-text-primary:    var(--color-cocoa-ink);
  --color-text-muted:      var(--color-cocoa-ink-60);
  --color-text-on-authority: var(--color-butter-cream);
  --color-accent:          var(--color-champagne-tan);
  --color-accent-hover:    var(--color-champagne-tan-deep);
  --color-punctuation:     var(--color-velvet-emerald);
  --color-border:          var(--color-champagne-tan-20);

  /* THE RATIO — measured SURFACE FILL on the built homepage. Verified figures,
     not aspirations (sum of element areas grouped by computed backgroundColor):
       ~68%  Butter Cream          (walls)
       ~13%  Rosewood              (the three authority anchors: header, final CTA, footer)
       ~12%  Warm Alabaster        (plaster relief, cards, alternating sections)
       ~ 7%  Whisper Mint          (botanical mural wash — the PALE sage, free to breathe)
       ~<1%  Champagne Tan         (as FILL only — see note)
        0%   Velvet Emerald        (as FILL — it is text punctuation, nothing more)

     Note this measures fill, not presence. Champagne Tan / Gold Leaf carry the CTAs,
     borders, rules and foil — they live in text and 1px lines, so they barely register
     as area while doing most of the brand's talking. Do not "correct" their low number
     by filling shapes with tan; that is how this palette turns into a biscuit tin.

     Guardrail: if Rosewood passes ~15%, the page has stopped feeling like a cream
     room with anchors and started feeling like a dark site. If Velvet Emerald ever
     registers as fill at all, someone has broken rule 7.

     Note the two greens are not interchangeable. Whisper Mint is the pale sage of
     the mural walls and may wash a whole section. Velvet Emerald is the dark green
     of the furniture — two pieces in a cream room — and must stay at punctuation
     scale forever. When someone says "less green", they mean the emerald.

     Contrast-safety rules (enforced by convention, not code):
     1. Never place tan text on white below 14pt — it disappears. Use Cocoa Ink instead.
     2. Never place tan directly on mint — the two soft warm/cool tones cancel
        each other out. Pass cream between them.
     3. Cocoa Ink replaces pure black for all large fills.
     4. Rosewood is the authority colour: headers, covers, footers, hero panels only —
        it's a large-fill anchor like Cocoa Ink, not a body-copy or small-text color.
     5. On Rosewood, text runs in Butter Cream (never Cocoa Ink — insufficient contrast).
     6. NEVER use pure #FFFFFF as a surface. The clinic has no stark white anywhere;
        use Warm Alabaster. White reads cold and hospital-like against this palette.
     7. Velvet Emerald is punctuation, not a section colour. Allowed: small badges,
        icon strokes, a rule, a verified tick, one accent chair-sized moment per page.
        Forbidden: full-width section fills, hero panels, footers, body text.
     8. Gold Leaf gradient is for foil moments adjacent to the logo — never body text,
        never large fills, never more than one per viewport. */


  /* -----------------------------------------------------------------------
     TYPOGRAPHY
     ----------------------------------------------------------------------- */
  --font-display: 'Cormorant Garamond', serif;   /* headlines, treatment names, quotes, campaign lines */
  --font-body:    'Jost', sans-serif;            /* subheads, labels, CTAs, navigation, body copy */

  /* Display — Cormorant Garamond Medium & Italic, sentence case only.
     Italic reserved for exactly ONE emotional word per headline. */
  --text-h1-size:   clamp(2.125rem, 1.7rem + 1.8vw, 3rem); /* 34–48pt */
  --text-h1-weight: 500;
  --text-h1-line:   1.15;

  --text-h2-size:   clamp(1.125rem, 1rem + 0.6vw, 1.5rem); /* 18–24pt */
  --text-h2-weight: 600;
  --text-h2-line:   1.25;

  /* Subheads / Labels / CTAs — Jost Medium, uppercase, tracked +8% */
  --text-label-size:     clamp(0.5rem, 0.48rem + 0.1vw, 0.625rem); /* 8–10pt */
  --text-label-weight:   500;
  --text-label-tracking: 0.08em; /* +8% */
  --text-cta-tracking:   0.025em; /* +2.5pt for buttons/CTA specifically */
  --text-label-transform:uppercase;

  /* Body — Jost Light/Regular, 9–11pt, relaxed leading */
  --text-body-size:   clamp(0.5625rem, 0.55rem + 0.06vw, 0.6875rem); /* 9–11pt */
  --text-body-weight-light:   300;
  --text-body-weight-regular: 400;
  --text-body-line:   1.6;

  /* Numerals stay lining (tabular/lining figures) — e.g. ₹4,500 · 45 min */
  --numeral-variant: lining-nums;


  /* -----------------------------------------------------------------------
     SPACING SYSTEM
     8px base unit — generous, unhurried, spa-like whitespace.
     ----------------------------------------------------------------------- */
  --space-1:  0.5rem;   /*  8px  — micro (icon gaps, inline) */
  --space-2:  0.75rem;  /* 12px  — tight (label to value) */
  --space-3:  1rem;     /* 16px  — base unit */
  --space-4:  1.5rem;   /* 24px  — component padding, small */
  --space-5:  2rem;     /* 32px  — card padding */
  --space-6:  3rem;     /* 48px  — section sub-gaps */
  --space-7:  4rem;     /* 64px  — section gaps, mobile */
  --space-8:  6rem;     /* 96px  — section gaps, desktop */
  --space-9:  8rem;     /* 128px — hero / breathing room between chapters */

  /* Layout */
  --content-max-width: 1200px;
  --content-padding-inline: clamp(1.5rem, 4vw, 4rem);


  /* -----------------------------------------------------------------------
     RADIUS — soft, spa-like, never sharp
     ----------------------------------------------------------------------- */
  --radius-sm:  4px;   /* buttons, tags */
  --radius-md:  12px;  /* cards, inputs */
  --radius-lg:  20px;  /* feature cards, image frames */
  --radius-pill: 999px; /* pill buttons, badges */


  /* -----------------------------------------------------------------------
     ELEVATION — soft, mint-tinted, never harsh
     ----------------------------------------------------------------------- */
  --shadow-rest:  0 1px 2px rgba(59, 42, 46, 0.04);
  --shadow-card:  0 4px 16px rgba(59, 42, 46, 0.06);
  --shadow-hover: 0 12px 32px rgba(168, 192, 170, 0.28); /* mint-tinted lift */


  /* -----------------------------------------------------------------------
     MOTION — see animations.css for full guidelines
     ----------------------------------------------------------------------- */
  --ease-signature: cubic-bezier(0.16, 1, 0.3, 1); /* slow settle, "the exhale" */
  --ease-standard:  ease-in-out;
  --duration-micro:    150ms;
  --duration-standard: 350ms;
  --duration-slow:     550ms;
}