/* ============================================================
   SKIN THERAPY — Brand foundation (hi-fi sites)
   Tokens + fonts + base + shared components. Import everywhere.
   ============================================================ */

/* ---- Fonts (brand) ---- */
@font-face { font-family:'Cardo'; src:url('fonts/Cardo-Regular.ttf') format('truetype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Cardo'; src:url('fonts/Cardo-Bold.ttf') format('truetype'); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'Cardo'; src:url('fonts/Cardo-Italic.ttf') format('truetype'); font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:'Helvetica Neue LT'; src:url('fonts/HelveticaNeueThin.otf') format('opentype'); font-weight:200; font-style:normal; font-display:swap; }
@font-face { font-family:'Helvetica Neue LT'; src:url('fonts/HelveticaNeueLight.otf') format('opentype'); font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:'Helvetica Neue LT'; src:url('fonts/HelveticaNeueRoman.otf') format('opentype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Helvetica Neue LT'; src:url('fonts/HelveticaNeueMedium.otf') format('opentype'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Helvetica Neue LT'; src:url('fonts/HelveticaNeueBold.otf') format('opentype'); font-weight:700; font-style:normal; font-display:swap; }

:root {
  /* palette */
  --st-orange:#ff6f33; --st-blue:#9fd4e2; --st-yellow:#ffc727; --st-violet:#aa9ad8;
  --st-white:#f6f6f6; --st-black:#111111; --st-paper:#ffffff;
  --st-orange-700:oklch(58% 0.18 42);
  --st-orange-soft:#ffe6db; --st-blue-soft:#e4f2f6; --st-yellow-soft:#fff2cf; --st-violet-soft:#ece7f6;

  /* semantic */
  --fg-1:var(--st-black); --fg-2:#4a4a4a; --fg-3:#8a8a8a;
  --fg-on-dark:var(--st-white); --fg-on-orange:#fff;
  --bg-1:var(--st-white); --bg-2:var(--st-paper); --bg-inverse:var(--st-black); --bg-brand:var(--st-orange);
  --line-1:#e4e2dd; --line-2:#d2cfc8; --line-on-dark:rgba(255,255,255,.16);
  --accent:var(--st-orange); --accent-press:var(--st-orange-700);
  --focus-ring:color-mix(in oklch, var(--st-orange) 55%, white);

  /* type */
  --font-display:'Cardo','Times New Roman',Georgia,serif;
  --font-body:'Helvetica Neue LT','Helvetica Neue',Helvetica,Arial,sans-serif;
  --text-display:400 clamp(48px,7vw,96px)/0.98 var(--font-display);
  --text-h1:400 clamp(40px,5vw,64px)/1.04 var(--font-display);
  --text-h2:400 clamp(30px,3.4vw,44px)/1.08 var(--font-display);
  --text-h3:400 28px/1.15 var(--font-display);
  --text-title:500 20px/1.3 var(--font-body);
  --text-lead:300 20px/1.55 var(--font-body);
  --text-body:400 16px/1.6 var(--font-body);
  --text-small:400 14px/1.55 var(--font-body);
  --text-caption:500 12px/1.4 var(--font-body);
  --text-eyebrow:500 12px/1.2 var(--font-body);
  --tracking-eyebrow:0.18em; --tracking-tight:-0.01em;

  /* radii / spacing / shadow */
  --r-xs:4px; --r-sm:8px; --r-md:14px; --r-lg:22px; --r-pill:999px;
  --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;
  --shadow-sm:0 1px 2px rgba(17,17,17,.05);
  --shadow-md:0 6px 24px -8px rgba(17,17,17,.12);
  --shadow-lg:0 24px 60px -20px rgba(17,17,17,.20);
}

/* ---- base ---- */
* { box-sizing:border-box; }
html,body { margin:0; padding:0; }
body { font-family:var(--font-body); color:var(--fg-1); background:var(--st-white);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
img { display:block; max-width:100%; }
button { font-family:inherit; cursor:pointer; }
a { color:inherit; text-decoration:none; }

.serif { font-family:var(--font-display); font-weight:400; letter-spacing:-0.01em; }
.eyebrow { font:var(--text-eyebrow); letter-spacing:var(--tracking-eyebrow); text-transform:uppercase; color:var(--accent); }

/* ---- buttons ---- */
.btn { display:inline-flex; align-items:center; gap:8px; justify-content:center;
  font:var(--text-small); font-weight:500; border-radius:var(--r-pill);
  padding:13px 28px; border:1.5px solid transparent; white-space:nowrap;
  transition:background .18s cubic-bezier(.2,.6,.2,1), transform .12s ease, color .18s, border-color .18s; }
.btn:active { transform:scale(.98); }
.btn svg { width:17px; height:17px; }
.btn-primary { background:var(--st-orange); color:#fff; }
.btn-primary:hover { background:var(--st-orange-700); }
.btn-dark { background:var(--st-black); color:#fff; }
.btn-dark:hover { background:#000; }
.btn-outline { background:transparent; border-color:var(--st-black); color:var(--st-black); }
.btn-outline:hover { background:var(--st-black); color:#fff; }
.btn-ghost-light { background:transparent; border-color:rgba(255,255,255,.6); color:#fff; }
.btn-ghost-light:hover { background:#fff; color:var(--st-black); border-color:#fff; }
.btn-block { width:100%; }
.btn-lg { padding:16px 34px; font-size:15px; }
.btn-sm { padding:9px 18px; font-size:13px; }

/* ---- icon button + cart bubble ---- */
.iconbtn { width:42px; height:42px; border-radius:var(--r-pill); border:none; background:transparent;
  display:inline-flex; align-items:center; justify-content:center; color:inherit;
  transition:background .15s; position:relative; }
.iconbtn:hover { background:rgba(17,17,17,.07); }
.iconbtn svg { width:21px; height:21px; }
.bubble { position:absolute; top:3px; right:3px; min-width:17px; height:17px; padding:0 4px;
  background:var(--st-orange); color:#fff; border-radius:var(--r-pill);
  font-size:10px; font-weight:600; display:flex; align-items:center; justify-content:center; line-height:1; }

/* ---- image-slot: brand styling of the empty placeholder ---- */
image-slot { background:var(--st-blue-soft); color:var(--fg-3); --slot-accent:var(--st-orange); }
image-slot::part(placeholder) { font-family:var(--font-body); font-size:13px; letter-spacing:.02em; }

/* ---- shared cart drawer (themed via vars) ---- */
.cart-scrim { position:fixed; inset:0; background:rgba(17,17,17,.34); z-index:80; opacity:0; pointer-events:none; transition:opacity .2s; }
.cart-scrim.open { opacity:1; pointer-events:auto; }
.cart-drawer { position:fixed; top:0; right:0; height:100%; width:min(420px,90vw); background:var(--st-paper);
  z-index:81; transform:translateX(100%); transition:transform .26s cubic-bezier(.2,.6,.2,1);
  display:flex; flex-direction:column; box-shadow:var(--shadow-lg); }
.cart-drawer.open { transform:none; }
.cart-head { display:flex; align-items:center; justify-content:space-between; padding:22px 24px; border-bottom:1px solid var(--line-1); }
.cart-body { flex:1; overflow:auto; padding:8px 24px; }
.cart-foot { padding:20px 24px; border-top:1px solid var(--line-1); }
.cart-line { display:flex; gap:14px; padding:16px 0; border-bottom:1px solid var(--line-1); }
.cart-line .thumb { width:64px; height:64px; border-radius:var(--r-sm); background:var(--st-blue-soft); object-fit:cover; flex:0 0 auto; }

/* ---- entrance (guarded) ---- */
@keyframes fadeUp { from { transform:translateY(12px); } to { transform:none; } }
.fade { opacity:1; }
@media (prefers-reduced-motion: no-preference) {
  .fade { animation:fadeUp .5s cubic-bezier(.2,.6,.2,1) both; }
}

/* ---- utilities ---- */
.cap { font:var(--text-caption); }
.lead { font:var(--text-lead); color:var(--fg-2); }
.muted { color:var(--fg-3); }
.hairline { border:none; border-top:1px solid var(--line-1); margin:0; }