/* sanctuary · brand system v18.1
   Lululemon of mental health: one face, dark-first, athletic quiet.
   Hierarchy from weight and scale. No wellness theater. */

:root{
  /* playbook canon */
  --evening:#12160F;
  --dawn:#EDE7D6;
  --fern:#7E9169;
  --clay:#B6502E;

  /* derived surfaces */
  --evening-2:#1A1F16;
  --evening-3:#242A1E;
  --dawn-2:#F5F0E4;
  --dawn-soft:rgba(237,231,214,.72);
  --fern-deep:#5F6F4F;
  --fern-mist:rgba(126,145,105,.14);
  --fern-line:rgba(126,145,105,.28);
  --clay-soft:rgba(182,80,46,.12);
  --gold-warm:#C3B79A;
  --gold-line:rgba(195,183,154,.28);

  /* map legacy tokens → canon (compat) */
  --sage:var(--fern);
  --sage-hover:var(--fern-deep);
  --sage-deep:var(--fern-deep);
  --midnight:var(--evening);
  --deep-water:#2A3224;
  --ink:var(--deep-water);
  --shell:var(--dawn);
  --fog:var(--dawn);
  --ember-cream:var(--dawn);
  --cream:var(--dawn);
  --paper:var(--dawn-2);
  --gold:var(--gold-warm);
  --border:rgba(18,22,15,.12);
  --mist:#8A9180;
  --stone:#6B7264;
  --pebble:#D5D0C2;

  /* motion */
  --ease-premium:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --dur-fast:.22s;
  --dur-med:.45s;
  --dur-slow:.9s;

  /* type scale (Hanken only) */
  --t-brand:.72rem;
  --t-label:.68rem;
  --t-body:.9375rem;
  --t-lead:1.125rem;
  --t-title:clamp(1.35rem,3.6vw,1.85rem);
  --t-display:clamp(1.85rem,5vw,2.75rem);

  /* radii: athletic, not bubbly */
  --r-xs:3px;
  --r-sm:6px;
  --r-md:10px;
  --r-lg:14px;
  --r-xl:18px;
}

/* ── type utilities ── */
.s-brand,.nav-brand-text,.hero-brand,.ob-brand{
  font-family:var(--font-brand)!important;
  font-weight:500!important;
  letter-spacing:var(--tracking-brand)!important;
  text-transform:lowercase!important;
}
.s-label,.section-label,.ap-eyebrow,.ap-ribbon,.exp-flagship-k,.shore-band-k,
.earned-k,.exp-earned-k,.exp-carried-k,.cinema-kicker{
  font-family:var(--font-brand)!important;
  font-size:var(--t-label)!important;
  font-weight:500!important;
  letter-spacing:.16em!important;
  text-transform:lowercase!important;
}
.s-title,.ap-h1,.cinema-title,.earned-title,.scrn-title{
  font-family:var(--font-brand)!important;
  font-weight:400!important;
  letter-spacing:-.02em!important;
  line-height:1.18!important;
}
.s-body,.ap-read,.lead,.hero-sub{
  font-weight:300!important;
  line-height:1.65!important;
}

/* ── premium buttons (athletic, confident) ── */
.btn,.btn-hero,.btn-primary,.ap-btn,.self-line-btn,.dewbtn,
.announce-cta,.path-cta,.unsent-release{
  font-family:var(--font-brand)!important;
  font-weight:500!important;
  letter-spacing:.06em!important;
  text-transform:lowercase!important;
  border-radius:var(--r-md)!important;
  transition:
    transform var(--dur-fast) var(--ease-out),
    background var(--dur-med) var(--ease-premium),
    border-color var(--dur-med) var(--ease-premium),
    color var(--dur-med) var(--ease-premium),
    box-shadow var(--dur-med) var(--ease-premium)!important;
}
.btn:active,.btn-hero:active,.ap-btn:active,.btn-primary:active{
  transform:scale(.985)!important;
}
.btn,.btn-primary,.ap-btn:not(.ghost),.self-line-btn:not(.ghost),.dewbtn{
  background:var(--evening)!important;
  color:var(--dawn)!important;
  border:1px solid transparent!important;
  box-shadow:none!important;
}
.btn:hover,.btn-primary:hover,.ap-btn:not(.ghost):hover{
  background:var(--evening-2)!important;
}
.btn.sage,.btn-hero-primary,.ap-btn.sage{
  background:var(--fern)!important;
  color:var(--evening)!important;
}
.btn.sage:hover,.btn-hero-primary:hover{
  background:var(--fern-deep)!important;
  color:var(--dawn)!important;
}
.btn.ghost,.btn-secondary,.btn-hero-secondary,.ap-btn.ghost,.self-line-btn.ghost{
  background:transparent!important;
  color:var(--ink)!important;
  border:1px solid var(--border)!important;
  box-shadow:none!important;
  font-weight:400!important;
}
.btn.ghost:hover,.btn-secondary:hover,.btn-hero-secondary:hover,.ap-btn.ghost:hover{
  border-color:var(--fern-line)!important;
  color:var(--fern-deep)!important;
  background:var(--fern-mist)!important;
}

/* night / device night: fern primary */
.device.night .btn:not(.ghost),
.device.night .ap-btn:not(.ghost),
.device.night .self-line-btn:not(.ghost),
body.night .ap-btn:not(.ghost){
  background:var(--fern)!important;
  color:var(--evening)!important;
}
.device.night .btn.ghost,
.device.night .ap-btn.ghost{
  color:var(--dawn-soft)!important;
  border-color:rgba(237,231,214,.16)!important;
}

/* ── surfaces: quiet material, not cards-as-decoration ── */
.card,.self-card,.expcard,.exp-flag-card,.letter,.practice-carry,
.shore-band,.earned-inner,.ap-panel{
  border-radius:var(--r-lg)!important;
  border-color:var(--border)!important;
  box-shadow:none!important;
}
.exp-flag-card,.expcard{
  background:
    linear-gradient(180deg,rgba(126,145,105,.04),transparent 40%),
    var(--card,var(--paper))!important;
  transition:
    border-color var(--dur-med) var(--ease-premium),
    transform var(--dur-fast) var(--ease-out),
    background var(--dur-med) var(--ease-premium)!important;
}
.exp-flag-card:hover,.expcard:hover{
  border-color:var(--fern-line)!important;
  transform:translateY(-1px);
}
.exp-flag-card.featured,.expcard.flagship{
  border-color:var(--fern-line)!important;
  background:
    radial-gradient(ellipse at 0% 0%,var(--fern-mist),transparent 55%),
    var(--card,var(--paper))!important;
}
.exp-flag-name,.expcard .it,.path-stage-name{
  font-weight:500!important;
  letter-spacing:-.015em!important;
}
.exp-flag-type,.expcard .ib{
  letter-spacing:.14em!important;
}

/* ── inputs ── */
input,textarea,.ap-namein,.ex2-textarea,.sb-input,.unsent-textarea,.line{
  font-family:var(--font-brand)!important;
  border-radius:var(--r-md)!important;
  border-color:var(--border)!important;
  transition:border-color var(--dur-med) var(--ease-premium),box-shadow var(--dur-med)!important;
}
input:focus,textarea:focus,.ap-namein:focus,.ex2-textarea:focus,.sb-input:focus{
  outline:none!important;
  border-color:var(--fern)!important;
  box-shadow:0 0 0 3px var(--fern-mist)!important;
}

/* ── chips / segments: architectural, not pills ── */
.ap-chip,.wchip,.seg button,.modes button,.path-chip{
  border-radius:var(--r-sm)!important;
  font-family:var(--font-brand)!important;
  letter-spacing:.04em!important;
  text-transform:lowercase!important;
}
.ap-chip.on,.seg button.on,.modes button.on{
  border-color:var(--fern)!important;
  color:var(--fern-deep)!important;
  background:var(--fern-mist)!important;
}

/* ── expedition environment (seamless premium) ── */
.exp-ovl-host{
  background:var(--evening)!important;
}
.exp-ovl-host .ovl,
.exp-ovl-host .ap-ovl,
.ex2-ovl,#ex-ovl{
  background:
    radial-gradient(ellipse 90% 50% at 50% -10%,rgba(126,145,105,.12),transparent 55%),
    radial-gradient(ellipse 70% 40% at 80% 100%,rgba(195,183,154,.06),transparent 50%),
    var(--evening)!important;
}
.device.exp-active{
  --ink:var(--dawn);
  --soft:rgba(237,231,214,.62);
  --faint:rgba(237,231,214,.38);
  --card:var(--evening-2);
  --app-bg:var(--evening);
  --hair:rgba(237,231,214,.1);
  --line:rgba(237,231,214,.1);
  --line2:rgba(237,231,214,.16);
}
.device.exp-active .nav{
  opacity:.22!important;
  filter:saturate(.7);
}
.ap-panel{
  background:linear-gradient(180deg,transparent 0%,rgba(26,31,22,.92) 18%,rgba(26,31,22,.98) 100%)!important;
  padding:28px 22px 22px!important;
  border:1px solid rgba(237,231,214,.06);
}
.device:not(.night) .ap-panel,
.exp-ovl-host .ap-panel{
  /* expeditions always read as evening terrain */
  color:var(--dawn);
}
.ap-h1{color:var(--dawn)!important;font-size:clamp(1.45rem,4.5vw,1.85rem)!important;margin-bottom:12px!important;}
.ap-read{color:rgba(237,231,214,.88)!important;}
.ap-read.dim{color:rgba(237,231,214,.58)!important;}
.ap-small{color:rgba(237,231,214,.5)!important;}
.ap-eyebrow,.ap-ribbon{color:var(--fern)!important;}
.ap-ribbon::before{background:var(--fern)!important;}
.ap-btn:not(.ghost){
  background:var(--fern)!important;
  color:var(--evening)!important;
  border-radius:var(--r-md)!important;
  margin-top:16px!important;
  padding:14px 18px!important;
}
.ap-btn.ghost{
  color:rgba(237,231,214,.55)!important;
  border:none!important;
  margin-top:4px!important;
}
.ap-namein,.ex2-textarea{
  background:rgba(18,22,15,.55)!important;
  border-color:rgba(237,231,214,.14)!important;
  color:var(--dawn)!important;
}
.ap-namein::placeholder,.ex2-textarea::placeholder{color:rgba(237,231,214,.32)!important;}
.exp-handoffs{
  display:flex;flex-direction:column;gap:8px;
  margin:18px 0 4px;padding:14px 0 0;
  border-top:1px solid rgba(237,231,214,.1);
}
.exp-handoff-k{
  font-size:10px;letter-spacing:.16em;text-transform:lowercase;
  color:var(--gold);margin-bottom:4px;font-weight:500;
}
.exp-handoff{
  font-family:var(--font-brand)!important;
  font-size:13px;font-weight:400;letter-spacing:.03em;
  text-align:left;padding:11px 12px;border-radius:var(--r-sm);
  background:rgba(237,231,214,.04);border:1px solid rgba(237,231,214,.1);
  color:rgba(237,231,214,.82);cursor:pointer;
  transition:border-color var(--dur-med),background var(--dur-med),transform var(--dur-fast);
}
.exp-handoff:hover{
  border-color:var(--fern-line);background:var(--fern-mist);transform:translateX(2px);
}
.exp-somatic{
  margin:12px auto 0;max-width:290px;text-align:left;
  font-size:12.5px;line-height:1.5;letter-spacing:.01em;
  color:rgba(237,231,214,.62);
  padding:10px 12px;border-left:2px solid rgba(126,145,105,.55);
  background:rgba(126,145,105,.08);
}
.exp-carried,.exp-earned{
  border-left:2px solid var(--fern)!important;
  background:rgba(126,145,105,.1)!important;
  border-radius:0 var(--r-md) var(--r-md) 0!important;
}
.cinema-threshold-mark{
  background:linear-gradient(90deg,transparent,var(--fern),transparent)!important;
}
.cinema-kicker{color:var(--gold)!important;}
.cinema-ovl{
  background:
    radial-gradient(ellipse 80% 60% at 50% 20%,rgba(126,145,105,.14),transparent 55%),
    rgba(18,22,15,.94)!important;
}

/* earned moment */
.earned-moment{background:rgba(18,22,15,.62)!important;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);}
.earned-inner{
  background:var(--evening-2)!important;
  border:1px solid rgba(237,231,214,.1)!important;
  color:var(--dawn);
}
.earned-title{color:var(--dawn)!important;font-weight:400!important;}
.earned-body{color:rgba(237,231,214,.65)!important;}
.earned-k,.earned-shore{color:var(--fern)!important;}

/* ── demo device shell ── */
.device{
  background:
    radial-gradient(ellipse 80% 40% at 50% -5%,rgba(126,145,105,.08),transparent 50%),
    var(--app-bg,var(--fog))!important;
}
.device .nav{
  border-top:1px solid var(--hair,var(--border))!important;
  background:rgba(237,231,214,.82)!important;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
.device.night .nav{
  background:rgba(18,22,15,.88)!important;
  border-top-color:rgba(237,231,214,.08)!important;
}
.device .nav button{
  font-family:var(--font-brand)!important;
  font-size:9.5px!important;
  font-weight:500!important;
  letter-spacing:.08em!important;
  text-transform:lowercase!important;
  border-radius:var(--r-sm)!important;
}
.device .nav button.on{
  color:var(--fern)!important;
}

/* ── marketing site cohesion ── */
body.premium-site,
body{
  font-feature-settings:"ss01" 0,"kern" 1;
}
body.premium-site{
  --sage:var(--fern);
  --sage-hover:var(--fern-deep);
  --ink:var(--deep-water);
  --shell:var(--dawn);
  --gold:var(--gold-warm);
  --border:rgba(18,22,15,.12);
}
body.premium-site .site-head{
  background:rgba(237,231,214,.9)!important;
  border-bottom:1px solid rgba(18,22,15,.08)!important;
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
}
body.premium-site .hero{
  background:
    radial-gradient(ellipse 70% 55% at 50% 15%,rgba(126,145,105,.22),transparent 55%),
    linear-gradient(180deg,#0E120C 0%,#12160F 45%,#1A1F16 100%)!important;
}
body.premium-site .hero-brand{
  letter-spacing:.22em!important;
  font-weight:500!important;
  color:rgba(237,231,214,.7)!important;
}
body.premium-site .hero h1{
  font-weight:400!important;
  letter-spacing:-.01em!important;
  color:var(--dawn)!important;
}
body.premium-site .hero-sub{
  color:rgba(237,231,214,.68)!important;
  font-weight:300!important;
}
body.premium-site .btn-hero-primary{
  background:var(--fern)!important;
  color:var(--evening)!important;
  border-radius:var(--r-md)!important;
  letter-spacing:.08em!important;
  padding:14px 28px!important;
}
body.premium-site .btn-hero-secondary{
  border:1px solid rgba(237,231,214,.28)!important;
  color:var(--dawn)!important;
  border-radius:var(--r-md)!important;
  background:transparent!important;
  letter-spacing:.08em!important;
  padding:14px 28px!important;
}
body.premium-site .btn-hero-secondary:hover{
  border-color:rgba(237,231,214,.5)!important;
  background:rgba(237,231,214,.06)!important;
}
body.premium-site .section-label{
  color:var(--fern-deep)!important;
  border-bottom-color:rgba(18,22,15,.1)!important;
}
body.premium-site .announce-bar{
  background:var(--evening)!important;
}
body.premium-site .announce-tag{
  background:var(--fern)!important;
  color:var(--evening)!important;
  border-radius:var(--r-xs)!important;
  letter-spacing:.14em!important;
  text-transform:lowercase!important;
  font-weight:600!important;
}

/* path stages / feature rows: one job, no card clutter */
body.premium-site .path-stage,
body.premium-site .feat-item,
body.premium-site .world-item{
  border-radius:0!important;
  box-shadow:none!important;
  background:transparent!important;
  border:none!important;
  border-top:1px solid rgba(18,22,15,.1)!important;
  padding-top:1.25rem!important;
}
body.premium-site .path-stage-name,
body.premium-site .feat-title,
body.premium-site .world-item-name{
  font-weight:500!important;
  letter-spacing:-.02em!important;
}

/* intentional motion */
@keyframes s-rise{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:none}
}
@keyframes s-breathe{
  0%,100%{opacity:.92}
  50%{opacity:1}
}
@keyframes s-fern-glow{
  0%,100%{opacity:.45;transform:scaleX(.88)}
  50%{opacity:1;transform:scaleX(1)}
}
.reveal.is-visible,
.exp-flag-card,
.expcard,
.ap-stagger > *{
  animation-timing-function:var(--ease-premium)!important;
}
.device.exp-active .ap-panel{
  animation:s-rise .55s var(--ease-premium) both;
}
.cinema-threshold-mark{
  animation:s-fern-glow 3.4s ease-in-out infinite!important;
}
body.premium-site .hero-overlay{
  animation:s-breathe 9s ease-in-out infinite;
}

/* clay: rare studio signature only */
.clay-mark,.studio-clay{
  color:var(--clay)!important;
}
.clay-rule{
  height:2px;width:40px;background:var(--clay);border:none;margin:1rem 0;
}

@media (prefers-reduced-motion:reduce){
  .device.exp-active .ap-panel,
  body.premium-site .hero-overlay,
  .cinema-threshold-mark,
  .exp-flag-card:hover,
  .expcard:hover{
    animation:none!important;
    transform:none!important;
  }
}