/* ============================================================================
   L'Ateleir Aesthetics & Wellness · Design System
   ----------------------------------------------------------------------------
   Flattened from the Claude Design "_ds" token set into a single file
   (fonts + colors + typography + spacing + effects + base). No @import chain,
   no build step · link this file directly.

   NOTE: @import rules must come first in a CSS file, so the Google Fonts
   imports stay at the very top.
   ============================================================================ */

/* ---- Webfonts ----
   Display serif = Cormorant Garamond, Interface/labels = Montserrat,
   Body = Lato. Playfair Display is the "Bold Luxe" display face used
   site-wide (see site.css, which overrides --font-display to Playfair). */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Montserrat:wght@400;500;600;700&family=Lato:ital,wght@0,300;0,400;0,700;1,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,600;0,700;0,800;1,500;1,600&display=swap');

/* ============================ Color tokens ============================
   Warm ivory & marble base, gold as a selective accent, warm near-black text. */
:root {
  /* ---- Base palette (raw brand values) ---- */
  --porcelain:   #FBF8F2; /* Primary page background */
  --cream:       #F3EBDD; /* Alternating section background */
  --champagne:   #E7DAC0; /* Cards, bands, hover fills */
  --blush-nude:  #E4D3C8; /* Optional soft warmth accent, sparingly */
  --marble:      #FFFFFF; /* Cards, nav, surfaces over cream */

  --gold-antique: #A8842C; /* Primary accent · buttons, rules, active states */
  --gold-leaf:    #C9A24B; /* Metallic highlights, icons, gradients */
  --gold-deep:    #806124; /* Gold-toned text on light backgrounds */

  --espresso:    #252019; /* Primary text and dark buttons */
  --taupe:       #6E655A; /* Secondary text, captions */
  --line:        #E3D9C4; /* Hairlines, borders, dividers */

  /* Gold as a subtle metallic gradient (rules, small accents only) */
  --gold-gradient: linear-gradient(135deg, #C9A24B 0%, #A8842C 55%, #806124 100%);

  /* ---- Gold · Set 2 (Bold Luxe) · brighter, brushed-metal ---- */
  --gold-lite:  #F0D98F; /* bright champagne-gold highlight */
  --gold-mid:   #DDBF6E; /* mid metallic */
  --gold-metal: linear-gradient(135deg, #F0D98F 0%, #DDBF6E 55%, #C9A24B 100%);
  --gold-sheen: linear-gradient(115deg, rgba(255,255,255,0) 34%, rgba(255,255,255,0.78) 49%, rgba(255,255,255,0) 64%);

  /* ---- Semantic aliases ---- */
  --bg-page:        var(--porcelain);
  --bg-alt:         var(--cream);
  --bg-band:        var(--champagne);
  --surface-card:   var(--marble);
  --surface-hover:  var(--champagne);

  --text-primary:   var(--espresso);
  --text-secondary: var(--taupe);
  --text-gold:      var(--gold-deep);   /* gold text on light · never Leaf */
  --text-on-gold:   var(--espresso);    /* text sitting on a gold fill */
  --text-on-dark:   var(--porcelain);   /* text on espresso surfaces */

  --accent:         var(--gold-antique);
  --accent-hover:   var(--gold-deep);
  --border:         var(--line);
  --border-gold:    var(--gold-antique);

  --focus-ring:     var(--gold-antique);
}

/* ============================ Typography tokens ============================ */
:root {
  /* ---- Families (with fallback stacks) ---- */
  --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-ui:      'Montserrat', Helvetica, Arial, sans-serif;
  --font-body:    'Lato', Helvetica, Arial, sans-serif;

  /* Set 2 (Bold Luxe) display face */
  --font-display-2: 'Playfair Display', Georgia, 'Times New Roman', serif;

  /* ---- Type scale (desktop; scales down on mobile via clamp) ---- */
  --fs-display: clamp(2.375rem, 1.6rem + 3.4vw, 3.75rem); /* H1 38→60 */
  --fs-h2:      clamp(1.875rem, 1.4rem + 2.1vw, 2.625rem); /* H2 30→42 */
  --fs-h3:      clamp(1.5rem, 1.35rem + 0.7vw, 1.75rem);   /* H3 24→28 */
  --fs-eyebrow: 0.8125rem;   /* 13px */
  --fs-body-lg: 1.1875rem;   /* 19px */
  --fs-body:    1.0625rem;   /* 17px */
  --fs-small:   0.875rem;    /* 14px */
  --fs-button:  0.875rem;    /* 14px */

  /* ---- Weights ---- */
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* ---- Line heights ---- */
  --lh-display: 1.08;
  --lh-heading: 1.15;
  --lh-body:    1.65;
  --lh-tight:   1.3;

  /* ---- Letter spacing ---- */
  --ls-eyebrow: 0.16em;
  --ls-button:  0.12em;
  --ls-display: -0.01em;

  /* ---- Composite text roles ---- */
  --text-display: var(--fw-medium) var(--fs-display)/var(--lh-display) var(--font-display);
  --text-h2:      var(--fw-medium) var(--fs-h2)/var(--lh-heading) var(--font-display);
  --text-h3:      var(--fw-semibold) var(--fs-h3)/var(--lh-heading) var(--font-display);
  --text-body:    var(--fw-regular) var(--fs-body)/var(--lh-body) var(--font-body);
}

/* ============================ Spacing, layout & radii ============================ */
:root {
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* ---- Layout ---- */
  --content-max: 1200px;
  --gutter:      24px;
  --section-pad-y:        112px;
  --section-pad-y-mobile: 64px;

  /* ---- Corners: soft, not sharp ---- */
  --radius-sm:   4px;
  --radius:      8px;
  --radius-lg:   16px;
  --radius-pill: 999px;
  --radius-arch: 50% 50% 8px 8px / 42% 42% 8px 8px; /* gentle arch motif */
}

/* ============================ Effects: shadows, transitions, hairlines ============================ */
:root {
  --shadow-xs:  0 1px 2px rgba(37, 32, 25, 0.05);
  --shadow-sm:  0 2px 8px rgba(37, 32, 25, 0.06);
  --shadow:     0 8px 24px rgba(37, 32, 25, 0.08);
  --shadow-lg:  0 18px 48px rgba(37, 32, 25, 0.10);
  --shadow-gold: 0 6px 20px rgba(168, 132, 44, 0.18);
  --shadow-metal: 0 12px 32px rgba(168, 132, 44, 0.34);
  --shadow-metal-lg: 0 26px 60px rgba(168, 132, 44, 0.32);

  --hairline: 1px solid var(--line);

  /* Motion · calm, editorial. Fades & gentle eases, no bounce. */
  --ease:      cubic-bezier(0.4, 0.0, 0.2, 1);
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:  160ms;
  --dur:       240ms;
  --dur-slow:  420ms;
  --transition: var(--dur) var(--ease);
}

/* ============================ Base element defaults ============================ */
* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg-page);
  color: var(--text-primary);
  font: var(--text-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  margin: 0;
  color: var(--text-primary);
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-display);
}
h1 { font-size: var(--fs-display); line-height: var(--lh-display); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: var(--fw-semibold); }

p { margin: 0 0 1em; }

a { color: var(--text-gold); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Eyebrow label utility */
.eyebrow {
  font-family: var(--font-ui);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--text-gold);
}

/* Gentle gold hairline used as a section flourish */
.gold-rule {
  width: 48px;
  height: 2px;
  border: 0;
  background: var(--gold-gradient);
}

::selection { background: var(--champagne); color: var(--espresso); }

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* ============================ Surface & remap tokens ============================
   Added for hot-swappable theming. Every value below matches the previously
   hard-coded literal it replaced, so with no theme file loaded the site is
   pixel-identical. Theme files (assets/css/themes/*.css) override ONLY tokens
   and load LAST, after site.css. */
:root {
  --bg-nav: rgba(251,248,242,0.86);       /* sticky header glass */

  /* Dark band surfaces: hero, ICOONE band, closing CTA */
  --bg-band-dark:   var(--espresso);
  --bg-band-deep:   #1C1813;              /* photo backing inside the band */
  --text-band-hi:   var(--porcelain);     /* hero H1 */
  --text-band-title:#F3EEE5;              /* band section titles */
  --text-band-body: #D8CFC0;              /* band default copy */
  --text-band-muted:#C9C0B2;              /* band secondary copy */
  --accent-band:    var(--gold-leaf);     /* eyebrows, italics, ghost-btn text on band */
  --border-band:    var(--gold-antique);  /* ghost-btn border on band */

  /* A card/tile surface sitting ON a dark band, plus the two text weights that
     go on it. On the espresso scheme the panel was a hair DARKER than the band
     and the whole set was warm-grey; a theme is free to invert that (Plum
     lifts the panel above the band instead) as long as the roles hold. */
  --bg-band-panel:   #221C17;   /* feature cards, spec tiles inside a band */
  --text-band-dim:   #A79E90;   /* body copy on a band or its panels */
  --text-band-faint: #8E867A;   /* fine print: disclaimers, image captions */

  /* Footer (independent of the band so themes can split them) */
  --bg-footer:        var(--espresso);
  --bg-footer-deep:   #1C1813;
  --text-footer-hi:   var(--porcelain);
  --text-footer-muted:#C9C0B2;
  --text-footer-dim:  #9E968A;
  --text-footer-faint:#7C746A;
  --text-footer-ghost:#5F584F;
  --accent-footer:    var(--gold-leaf);
  --line-footer:      rgba(255,255,255,0.10);

  /* Warm gradient stops (consultation header + first-visit panel) */
  --grad-warm-a: #F6EFE1;
  --grad-warm-b: #EADDC6;

  /* A de-emphasised note sitting one step back from the surrounding copy —
     the technology.html hero note (on light) and the lightbox caption (on
     dark) both use it. Not in the original handoff table; added because
     #9E968A in those two spots had no token to move to. */
  --text-muted-soft: #9E968A;

  /* RGB triplets for translucent glows/hairlines: rgba(var(--glow-rgb), .3) */
  --glow-rgb:        201,162,75;   /* gold-leaf */
  --glow-deep-rgb:   168,132,44;   /* gold-antique */
  --glow-lite-rgb:   240,217,143;  /* gold-lite */
  --glow-warm-rgb:   228,211,200;  /* blush-nude */
  --glow-footer-rgb: 201,162,75;   /* footer hairlines/borders */
  --ink-rgb:         37,32,25;     /* espresso, for scrims + neutral hairlines */
  --taupe-rgb:       110,101,90;
}