/* ============================================================
   SKIN STUDIO PARIS — Colors & Type
   Salon beauté — La Défense
   Tons : blanc marbre, noir, chic & épuré
   ============================================================ */

/* ---- Webfonts ----
   The logo uses a wide-tracked geometric sans (close to Jost / Avenir
   Next Light). Body copy stays in the same family for visual unity.
   Cormorant Garamond is reserved for editorial / quote moments.
*/
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@200;300;400;500;600&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,400&display=swap');

:root {
  /* ---------- Palette ---------- */

  /* Marble whites — the brand's literal background */
  --marble-100: #ffffff;
  --marble-95:  #fbfaf8;       /* warm off-white, default page bg */
  --marble-90:  #f4f2ee;       /* card / panel surface */
  --marble-80:  #e9e5df;       /* hairline borders, dividers */
  --marble-vein:#c9c5c1;       /* the grey veins in the stone */

  /* Carbon / noir — the logo ink */
  --noir-100:   #1a1614;       /* primary text, headlines */
  --noir-80:    #2b2622;       /* secondary heavy */
  --noir-60:    #5a534d;       /* body secondary */
  --noir-40:    #8e867f;       /* tertiary, captions */
  --noir-20:    #c0b9b2;       /* disabled, placeholder */

  /* A whisper of warmth — used very sparingly: price tags,
     promotional ribbons, subtle hover states. Borrowed from
     the warm undertone of the marble. */
  --champagne:  #c9b89e;
  --champagne-soft: #e6dcc9;
  --rose-nude:  #d9bfb5;       /* skin-tone accent, rarely used */

  /* Functional */
  --success:    #4a6b4e;
  --error:      #8a3a3a;

  /* ---------- Semantic tokens ---------- */
  --bg:         var(--marble-95);
  --bg-elev:    var(--marble-100);
  --bg-marble:  url('assets/marble_background.jpg');
  --surface:    var(--marble-90);
  --border:     var(--marble-80);
  --border-strong: var(--marble-vein);

  --fg:         var(--noir-100);
  --fg-muted:   var(--noir-60);
  --fg-subtle:  var(--noir-40);
  --fg-on-dark: var(--marble-95);

  --accent:     var(--noir-100);          /* primary action = noir */
  --accent-soft:var(--champagne-soft);    /* promotional ribbon */
  --price-strike:var(--noir-40);
  --price-promo: var(--noir-100);

  /* ---------- Type families ---------- */
  --font-sans:    'Jost', 'Avenir Next', 'Helvetica Neue', system-ui, sans-serif;
  --font-display: 'Jost', 'Avenir Next', 'Helvetica Neue', system-ui, sans-serif;
  --font-serif:   'Cormorant Garamond', 'Cormorant', Georgia, serif;

  /* ---------- Type scale (modular, 1.25) ---------- */
  --fs-12: 0.75rem;
  --fs-13: 0.8125rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-30: 1.875rem;
  --fs-36: 2.25rem;
  --fs-48: 3rem;
  --fs-64: 4rem;
  --fs-80: 5rem;

  /* ---------- Tracking ----------
     The brand voice IS the tracking. Logo uses extreme wide-tracking
     on the uppercase wordmark. */
  --tr-tight:   -0.01em;
  --tr-normal:  0em;
  --tr-loose:   0.08em;
  --tr-wide:    0.18em;     /* eyebrow labels */
  --tr-wider:   0.28em;     /* logo / section labels */
  --tr-widest:  0.42em;     /* "PARIS" subtitle */

  /* ---------- Spacing (8-pt grid) ---------- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  96px;
  --sp-10: 128px;

  /* ---------- Radii ----------
     The brand is geometric and architectural. Corners are sharp by
     default; only inputs and pills get a soft radius. */
  --r-0: 0px;
  --r-1: 2px;
  --r-2: 4px;
  --r-pill: 999px;

  /* ---------- Elevation ----------
     Marble does not "lift". Use translucent shadows that read as a
     soft veil rather than a card-pop. */
  --shadow-0: none;
  --shadow-1: 0 1px 0 rgba(26,22,20,0.04);
  --shadow-2: 0 12px 32px -16px rgba(26,22,20,0.12);
  --shadow-3: 0 24px 60px -24px rgba(26,22,20,0.18);
  --hairline: 1px solid var(--border);

  /* ---------- Motion ---------- */
  --ease-out:    cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --dur-fast:    180ms; /* @kind other */
  --dur-base:    320ms; /* @kind other */
  --dur-slow:    640ms; /* @kind other */
}

/* ============================================================
   Base elements
   ============================================================ */

html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  font-weight: 300;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--noir-100); color: var(--marble-95); }

/* ---- Headings ---- */
.h-display, h1.display {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.5rem, 6vw, var(--fs-80));
  line-height: 1.04;
  letter-spacing: var(--tr-wider);
  text-transform: uppercase;
  color: var(--noir-100);
}
h1, .h1 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--fs-48);
  line-height: 1.08;
  letter-spacing: var(--tr-loose);
  text-transform: uppercase;
}
h2, .h2 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--fs-30);
  line-height: 1.15;
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
}
h3, .h3 {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-20);
  line-height: 1.3;
  letter-spacing: var(--tr-loose);
  text-transform: uppercase;
}

/* Eyebrow / section label */
.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-12);
  font-weight: 400;
  letter-spacing: var(--tr-widest);
  text-transform: uppercase;
  color: var(--fg-muted);
}

/* Editorial serif moments — quotes, soin descriptions */
.serif, blockquote {
  font-family: var(--font-serif);
  font-weight: 300;
  font-style: italic;
  font-size: var(--fs-24);
  line-height: 1.4;
  letter-spacing: 0.005em;
  color: var(--noir-80);
}

/* Body */
p, .body { font-size: var(--fs-16); line-height: 1.65; color: var(--fg); }
.body-lg { font-size: var(--fs-18); line-height: 1.65; }
.body-sm { font-size: var(--fs-14); line-height: 1.55; color: var(--fg-muted); }
.caption { font-size: var(--fs-12); letter-spacing: var(--tr-loose); color: var(--fg-subtle); }

/* Price typography — central to the brand experience */
.price {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-20);
  letter-spacing: var(--tr-loose);
}
.price-strike {
  text-decoration: line-through;
  color: var(--price-strike);
  font-weight: 300;
  margin-right: var(--sp-3);
}
.price-promo {
  color: var(--price-promo);
  font-weight: 500;
}

/* Links */
a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  transition: opacity var(--dur-fast) var(--ease-out);
}
a:hover { opacity: 0.55; }

/* ============================================================
   Helpers
   ============================================================ */
.rule {
  display: block; width: 48px; height: 1px;
  background: var(--noir-100);
  margin: var(--sp-5) 0;
}
.rule-center { margin-left: auto; margin-right: auto; }
.marble-bg {
  background-image: url('assets/marble_background.jpg');
  background-size: cover;
  background-position: center;
}