/* ============================================================
   PHREE SKIN — design tokens · LIGHT system
   Seed-airy + AG1 buy-craft, in Phree's brand:
   Stolzl · cool 5-colour palette · sky-blue reserved for PRICE ·
   7-dot Braille dot motif · frosted "lab-window" glass.
   ============================================================ */

/* ---------- Stolzl (self-hosted) ---------- */
@font-face{ font-family:"Stolzl"; src:url("/assets/fonts/stolzl_thin.otf") format("opentype");    font-weight:100; font-display:swap; }
@font-face{ font-family:"Stolzl"; src:url("/assets/fonts/stolzl_light.otf") format("opentype");   font-weight:300; font-display:swap; }
@font-face{ font-family:"Stolzl"; src:url("/assets/fonts/stolzl_book.otf") format("opentype");    font-weight:400; font-display:swap; }
@font-face{ font-family:"Stolzl"; src:url("/assets/fonts/stolzl_regular.otf") format("opentype"); font-weight:450; font-display:swap; }
@font-face{ font-family:"Stolzl"; src:url("/assets/fonts/stolzl_medium.otf") format("opentype");  font-weight:500; font-display:swap; }
@font-face{ font-family:"Stolzl"; src:url("/assets/fonts/stolzl_bold.otf") format("opentype");    font-weight:700; font-display:swap; }

:root{
  /* — exact brand palette — */
  --black:#0A0A0A; --white:#FFFFFF; --silver:#999999; --sky:#73B3CE; --charcoal:#172A3A;

  /* — light surfaces — */
  --paper:#FFFFFF;      /* base */
  --paper-2:#F6F5F1;    /* warm off-white (cards, alt sections) */
  --paper-3:#F4F6F7;    /* cool off-white */
  --stone:#EDEBE4;      /* muted band */
  --mist:#F7F8F7;       /* faint cool grey */

  /* — ink / text — */
  --ink:#0E1418; --ink-2:#3A4249; --muted:#707170;
  --line:#E7E9E7; --line-2:#CDD2CF;

  /* — accents (cool) — */
  --sky-light:#A8D0E2; --sky-soft:#DCEBF2; --sky-deep:#4E96B4;
  --charcoal-2:#0E1D29; --charcoal-3:#1F3A50;
  --price:var(--sky-deep);  /* reserved for price + key highlights (AG1 discipline) */

  /* — semantic — */
  --bg:var(--paper); --fg:var(--ink); --fg-dim:var(--muted);

  /* — glass — light frosted (nav, cards) — */
  --glass-bg:rgba(255,255,255,.62); --glass-border:rgba(255,255,255,.85); --glass-blur:22px;
  /* — glass — "lab window" over media (blur IS the scrim) — */
  --glasslab-bg:rgba(28,42,54,.35); --glasslab-blur:30px; --glasslab-border:rgba(255,255,255,.28);

  /* — type — */
  --f:"Stolzl", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fw-thin:100; --fw-light:300; --fw-book:400; --fw-reg:450; --fw-med:500; --fw-bold:700;
  --t-eyebrow: clamp(.7rem, .66rem + .18vw, .8rem);
  --t-body:    clamp(1rem, .97rem + .14vw, 1.08rem);
  --t-lead:    clamp(1.06rem, 1rem + .38vw, 1.22rem);
  --t-h3:      clamp(1.2rem, 1.1rem + .55vw, 1.5rem);
  --t-h2:      clamp(1.75rem, 1.35rem + 1.9vw, 2.8rem);
  --t-h1:      clamp(2.1rem, 1.6rem + 2.6vw, 3.6rem);
  --t-display: clamp(2.4rem, 1.7rem + 3.5vw, 4.3rem);
  --track-tight:-.025em;   /* the "expensive" display tracking */

  /* — radius — */
  --r-xs:6px; --r-sm:10px; --r-card:16px; --r-panel:24px; --r-xl:30px; --r-2xl:40px; --r-pill:100px;

  /* — layout / spacing — */
  --gutter: clamp(1.15rem, .6rem + 2.6vw, 3.5rem);
  --maxw:1280px; --maxw-wide:1440px;
  --sp-section: clamp(4.5rem, 2.5rem + 8vw, 10rem);

  /* — motion (Seed-caliber: two durations, one house curve, low-bounce spring) — */
  --dur-fast:.3s; --dur-mid:.6s; --dur-slow:.9s;
  --e-seed:  cubic-bezier(.75,0,.25,1);      /* Seed house curve */
  --e-out:   cubic-bezier(.16,1,.3,1);
  --e-inout: cubic-bezier(.75,0,.25,1);
  --e-back:  cubic-bezier(.33,1.53,.69,.99); /* low overshoot (Framer backOut) */
  --e-lift:  cubic-bezier(.34,1.2,.5,1);
  --e-spring:cubic-bezier(.34,1.3,.5,1);
  --stagger:.05s;

  /* — elevation — */
  --sh-sm:0 1px 2px rgba(20,40,55,.06), 0 2px 8px -4px rgba(20,40,55,.10);
  --sh-md:0 8px 24px -12px rgba(20,40,55,.20);
  --sh-lg:0 30px 60px -40px rgba(20,40,55,.34);
  --sh-xl:0 46px 90px -50px rgba(20,40,55,.46);

  /* — dot motif geometry (normalized grid) — */
  --dot-r:.35;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; overflow-x:clip; scroll-behavior:auto; }
body{
  font-family:var(--f); font-weight:var(--fw-book);
  font-size:var(--t-body); line-height:1.55; color:var(--fg); background:var(--bg);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:clip;   /* contain the off-canvas mobile nav slide-out (fixed, translateX 100%) so the page never scrolls sideways on phones */
}
img,video,canvas,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
h1,h2,h3,h4{ font-weight:var(--fw-med); line-height:1.05; letter-spacing:-.02em; color:var(--ink); }
.display{ font-weight:var(--fw-reg); letter-spacing:var(--track-tight); line-height:.98; text-wrap:balance; }
::selection{ background:var(--sky); color:#fff; }

/* lenis */
html.lenis,html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
.lenis.lenis-stopped{ overflow:hidden; }

/* ---------- primitives ---------- */
.container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.container--wide{ max-width:var(--maxw-wide); }

.eyebrow{ font-size:var(--t-eyebrow); text-transform:uppercase; letter-spacing:.15em; color:var(--ink-2);
  display:inline-flex; align-items:center; gap:.6em; font-weight:var(--fw-med);
  white-space:nowrap; flex-wrap:nowrap; max-width:100%; }   /* kickers are ONE line, always */
.eyebrow > span{ white-space:nowrap; }
/* accent = deep charcoal-blue (sky-blue stays reserved for PRICE); light dot over media */
.eyebrow .d{ width:.4em; height:.4em; border-radius:50%; background:var(--sky-deep); flex:none; }
.eyebrow--onmedia{ color:rgba(255,255,255,.88); }
.eyebrow--onmedia .d{ background:var(--sky-light); }
/* eyebrows are short kickers — smaller + tighter on phones so they never stack 3 lines */
@media (max-width:600px){
  .eyebrow{ letter-spacing:.05em; gap:.42em; font-size:.6rem; line-height:1.3; }
}

/* buttons — primary = filled charcoal-blue on light; price/accent stays sky */
.btn{ --b:var(--charcoal); --c:#fff;
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  padding:1em 1.7em; border-radius:var(--r-pill); background:var(--b); color:var(--c);
  font-weight:var(--fw-med); font-size:.95rem; letter-spacing:.005em; cursor:pointer; border:1px solid transparent;
  transition:transform .5s var(--e-out), background .35s, color .35s, border-color .35s; will-change:transform; }
.btn:hover{ transform:translateY(-2px); }
.btn .arw{ transition:transform .4s var(--e-out); }
.btn:hover .arw{ transform:translateX(4px); }
.btn--primary{ --b:var(--charcoal); --c:#fff; } .btn--primary:hover{ --b:var(--charcoal-3); }
.btn--sky{ --b:var(--sky); --c:#0b2531; } .btn--sky:hover{ --b:var(--sky-light); }
.btn--ghost{ --b:transparent; --c:var(--ink); border-color:var(--line-2); }
.btn--ghost:hover{ --b:transparent; border-color:var(--ink); }
.btn--dark{ --b:var(--black); --c:#fff; } .btn--dark:hover{ --b:#000; }
.btn--onmedia{ --b:#fff; --c:var(--charcoal); } .btn--onmedia:hover{ --b:var(--sky-light); }
.btn--lg{ padding:1.15em 2.1em; font-size:1rem; }
.btn--sm{ padding:.6em 1.1em; font-size:.82rem; }
.btn--block{ width:100%; }

/* text link with nudge arrow */
.tlink{ display:inline-flex; align-items:center; gap:.4em; color:var(--ink); font-weight:var(--fw-med); }
.tlink .arw{ transition:transform .4s var(--e-out); }
.tlink:hover .arw{ transform:translateX(4px); }
.tlink--sky{ color:var(--sky-deep); }

/* glass */
.glass{ background:var(--glass-bg); backdrop-filter:blur(var(--glass-blur)); -webkit-backdrop-filter:blur(var(--glass-blur));
  border:1px solid var(--glass-border); border-radius:var(--r-panel);
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 24px 50px -34px rgba(20,40,55,.4); }
.glass--lab{ background:var(--glasslab-bg); backdrop-filter:blur(var(--glasslab-blur)); -webkit-backdrop-filter:blur(var(--glasslab-blur));
  border:1px solid var(--glasslab-border); color:#fff;
  box-shadow:0 1px 0 rgba(255,255,255,.18) inset, 0 40px 80px -50px rgba(0,0,0,.55); }

/* price accent (reserved) */
.price{ color:var(--price); font-weight:var(--fw-med); font-variant-numeric:tabular-nums; }
.price s, .strike{ color:var(--muted); font-weight:var(--fw-book); }

/* pills / chips */
.chip{ display:inline-flex; align-items:center; gap:.45em; padding:.4em .8em; border:1px solid var(--line-2);
  border-radius:var(--r-pill); font-size:.78rem; color:var(--ink-2); background:var(--paper); }
.chip--sky{ border-color:var(--sky); color:var(--sky-deep); background:var(--sky-soft); }

/* section scaffolding */
.section{ padding-block:var(--sp-section); }
.section--alt{ background:var(--paper-2); }
.section--mist{ background:var(--mist); }
.sec-head{ display:flex; flex-direction:column; gap:1rem; margin-bottom:clamp(2rem, 1rem + 3vw, 3.5rem); max-width:var(--maxw); }
.sec-head h2{ font-size:var(--t-h2); font-weight:var(--fw-reg); letter-spacing:var(--track-tight); text-wrap:balance; max-width:20ch; }

/* reveal + lift-card (Seed signatures) */
[data-reveal]{ opacity:0; transform:translateY(22px); }
.no-motion [data-reveal]{ opacity:1; transform:none; }

/* split-word rise (hero + footer headlines) */
.wln{ display:inline-block; overflow:hidden; vertical-align:top; }
.wln__i{ display:inline-block; will-change:transform; }

/* lift-card scaffold */
[data-lift]{ will-change:transform; }
.lift__media{ will-change:transform; }

@media (prefers-reduced-motion:reduce){
  [data-reveal]{ opacity:1 !important; transform:none !important; }
  *{ animation-duration:.001ms !important; scroll-behavior:auto !important; }
}