/* ============================================================
   "Luxe studio" skin. Champagne & ink, editorial serif, restrained
   gold. Scoped under body.luxe and loaded by App.astro, which now
   defaults luxe ON — so this dresses the WHOLE studio dashboard
   (Projects, gallery editor, Account), not just /app/account. The
   client viewer (/g) and login keep their own layouts, untouched.
   Overrides the shipped semantic tokens within scope, so shared
   classes (.card/.btn/input/.side/.top/.stat) inherit the look for
   free; the bespoke bits (member card, pill tabs, plan cards) only
   match where that markup exists, so they're inert on other pages.
   File name is legacy (was account-only); kept to avoid churn.
   ============================================================ */
body.luxe{
  /* warm the ramp toward ivory + ink */
  --surface-page:oklch(0.988 0.008 88);
  --surface-sunken:oklch(0.970 0.012 86);
  --surface-card:oklch(0.988 0.008 88);
  --surface-hover:oklch(0.945 0.015 85);
  --surface-inset:oklch(0.970 0.012 86);
  --text-strong:oklch(0.175 0.010 56);
  --text-body:oklch(0.320 0.012 62);
  --text-muted:oklch(0.510 0.016 70);
  --text-faint:oklch(0.660 0.016 76);
  --border:oklch(0.820 0.016 82);
  --border-soft:oklch(0.895 0.014 84);
  --border-strong:oklch(0.235 0.012 58);

  /* gold accent + legible gold text + decorative foil */
  --gold:oklch(0.740 0.075 84);
  --gold-deep:oklch(0.580 0.072 78);
  --gold-line:oklch(0.845 0.055 84);
  --gold-tint:oklch(0.955 0.028 88);
  --gold-text:oklch(0.505 0.078 74);
  --foil-grad:linear-gradient(115deg,oklch(0.47 0.070 72),oklch(0.60 0.085 82) 46%,oklch(0.47 0.070 72));

  --positive-tint:oklch(0.955 0.022 150);
  --critical-tint:oklch(0.960 0.020 30);

  /* accent + primary action become gold within Account */
  --accent:var(--gold-deep);
  --accent-tint:var(--gold-tint);

  /* serif display + soft radii (override the shipped 0-radius) */
  --font-display:var(--font-serif);
  --radius-xs:7px;--radius-sm:11px;--radius-md:14px;--radius-lg:18px;

  --l-sh-sm:0 1px 2px oklch(0.30 0.02 70/.05),0 2px 6px oklch(0.30 0.02 70/.05);
  --l-sh-md:0 2px 8px oklch(0.30 0.02 70/.06),0 14px 34px -12px oklch(0.30 0.02 70/.14);
  --l-sh-gold:0 8px 30px -10px oklch(0.58 0.072 78/.28);

  background-image:radial-gradient(1100px 520px at 82% -12%, var(--gold-tint), transparent 62%);
}
/* Dark scope = warm espresso. The base body.luxe block above sets a LIGHT palette
   unconditionally (higher specificity than the token file's [data-theme="dark"]),
   so dark mode must restore the FULL dark ramp here — surfaces, text AND borders —
   not just the card. Without the text/page tokens you get dark cards sitting under
   light-mode dark text on a light page (unreadable). Page < inset < card < hover so
   cards lift; text runs cream→muted for legibility on espresso. */
body.luxe[data-theme="dark"], html[data-theme="dark"] body.luxe{
  --surface-page:oklch(0.165 0.010 60);
  --surface-sunken:oklch(0.140 0.010 60);
  --surface-card:oklch(0.238 0.012 64);
  --surface-hover:oklch(0.290 0.014 64);
  --surface-inset:oklch(0.195 0.012 62);
  --text-strong:oklch(0.960 0.010 88);
  --text-body:oklch(0.870 0.014 84);
  --text-muted:oklch(0.710 0.016 80);
  --text-faint:oklch(0.560 0.016 74);
  --border:oklch(0.330 0.014 66);
  --border-soft:oklch(0.285 0.012 64);
  --border-strong:oklch(0.800 0.016 84);
  --positive-tint:oklch(0.280 0.038 150);
  --critical-tint:oklch(0.300 0.045 30);
  --gold:oklch(0.800 0.085 85);--gold-deep:oklch(0.800 0.090 84);--gold-line:oklch(0.480 0.045 80);--gold-tint:oklch(0.300 0.040 82);
  --gold-text:oklch(0.840 0.090 86);
  --foil-grad:linear-gradient(115deg,var(--gold-deep),var(--gold) 46%,var(--gold-deep));
  --accent:var(--gold);--accent-tint:var(--gold-tint);
  --l-sh-sm:0 1px 2px oklch(0 0 0/.35);--l-sh-md:0 16px 40px -12px oklch(0 0 0/.55);--l-sh-gold:0 8px 30px -10px oklch(0.80 0.09 84/.22);
  background-image:radial-gradient(1100px 520px at 82% -12%, oklch(0.30 0.04 82/.5), transparent 62%);
}

/* fine paper grain */
body.luxe::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.4;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E");}
html[data-theme="dark"] body.luxe::before{mix-blend-mode:screen;opacity:.3;}
body.luxe .shell{position:relative;z-index:1;}

/* shared shell + controls inherit the warmth; add soft depth the crisp system omits */
body.luxe .side{background:color-mix(in oklab,var(--surface-page) 90%,transparent);backdrop-filter:blur(10px);}
body.luxe .side .ni.on svg{color:var(--gold-deep);opacity:1;}
body.luxe .side .word .mk{background:linear-gradient(150deg,var(--gold),var(--gold-deep));}
body.luxe .side .foot .av{background:linear-gradient(150deg,var(--gold),var(--gold-deep));color:#fff;}

body.luxe .card{box-shadow:var(--l-sh-sm);border-color:var(--border-soft);}
body.luxe .btn{border-radius:var(--radius-xs);box-shadow:var(--l-sh-sm);transition:transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast),background var(--dur-fast),border-color var(--dur-fast);}
body.luxe .btn:hover{transform:translateY(-1px);box-shadow:var(--l-sh-md);}
body.luxe .btn:active{transform:translateY(0);}
body.luxe .btn.ghost{background:var(--surface-card);color:var(--text-strong);border-color:var(--border);}
body.luxe .btn.ghost:hover{border-color:var(--gold);color:var(--gold-deep);}
body.luxe .btn.gold{background:linear-gradient(150deg,var(--gold),var(--gold-deep));border-color:transparent;color:#fff;}
body.luxe input{border-radius:var(--radius-xs);}
body.luxe input:focus{border-color:var(--gold);box-shadow:0 0 0 4px var(--gold-tint);}

/* editorial masthead (App.astro renders .eyebrow when luxe) */
body.luxe .top .eyebrow{display:inline-flex;align-items:center;gap:9px;font:var(--label);letter-spacing:var(--label-track);text-transform:uppercase;color:var(--gold-deep);margin:0 0 10px;}
body.luxe .top .eyebrow::before{content:"";width:22px;height:1px;background:var(--gold);}
/* When the eyebrow is a breadcrumb it has to LOOK like somewhere you can go — an
   underline on hover, and a focus ring, since it's now a real tab stop. Inherits the
   eyebrow's colour and tracking so the masthead reads unchanged until you reach for it. */
body.luxe .top .eyebrow a{color:inherit;text-decoration:none;border-bottom:1px solid transparent;transition:border-color var(--dur-fast,120ms) ease;}
body.luxe .top .eyebrow a:hover{border-bottom-color:currentColor;}
body.luxe .top .eyebrow a:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px;}
body.luxe .top h1.page{font:500 38px/1.03 var(--font-serif);letter-spacing:-.005em;}

/* ---- pill sub-tabs (AccountTabs renders these classes when luxe) ---- */
/* Full-width frosted bar so the tabs stay put — and hide the content scrolling
   behind them — just below the sticky page header. `top` is set inline from the
   measured header height (its height is variable). Frosted like the sidebar. */
.acct-tabbar{position:sticky;z-index:6;background:color-mix(in oklab,var(--surface-sunken) 90%,transparent);backdrop-filter:blur(10px);padding:12px 0 14px;margin:-6px 0 20px;}
.acct-tabs{position:relative;display:inline-flex;gap:4px;padding:5px;background:var(--surface-sunken);border:1px solid var(--border-soft);border-radius:var(--radius-pill);margin:0;}
.acct-tabs button{position:relative;z-index:1;border:0;background:none;cursor:pointer;padding:11px 22px;border-radius:var(--radius-pill);font:500 14px var(--font-sans);color:var(--text-muted);transition:color var(--dur-base) var(--ease-out);white-space:nowrap;}
.acct-tabs button.on{color:var(--text-strong);}
.acct-tabs .acct-thumb{position:absolute;z-index:0;top:5px;bottom:5px;border-radius:var(--radius-pill);background:var(--surface-card);box-shadow:var(--l-sh-sm),inset 0 0 0 1px var(--border-soft);transition:left var(--dur-base) var(--ease-out),width var(--dur-base) var(--ease-out);}
.acct-panel{animation:acctfade var(--dur-base) var(--ease-out);}
@keyframes acctfade{from{opacity:0;transform:translateY(7px);}to{opacity:1;transform:none;}}

/* ---- membership-card hero ---- */
body.luxe .foil{background:var(--foil-grad);-webkit-background-clip:text;background-clip:text;color:transparent;}
body.luxe .memcard{position:relative;overflow:hidden;border-radius:var(--radius-md);padding:30px 34px;margin-bottom:30px;
  background:linear-gradient(135deg,oklch(0.972 0.020 88),oklch(0.938 0.030 86) 48%,oklch(0.906 0.036 84));
  border:1px solid var(--gold-line);box-shadow:var(--l-sh-gold),inset 0 1px 0 oklch(1 0 0/.55);}
html[data-theme="dark"] body.luxe .memcard{background:linear-gradient(135deg,oklch(0.285 0.022 66),oklch(0.212 0.015 60) 55%,oklch(0.188 0.012 58));box-shadow:var(--l-sh-gold),inset 0 1px 0 oklch(1 0 0/.05);}
body.luxe .memcard::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;
  background:repeating-linear-gradient(58deg,transparent 0 6px,oklch(0.66 0.06 84/.07) 6px 7px),repeating-linear-gradient(-58deg,transparent 0 10px,oklch(0.66 0.06 84/.055) 10px 11px);
  -webkit-mask-image:radial-gradient(130% 130% at 100% 0,#000,transparent 66%);mask-image:radial-gradient(130% 130% at 100% 0,#000,transparent 66%);}
html[data-theme="dark"] body.luxe .memcard::before{opacity:.4;background:repeating-linear-gradient(58deg,transparent 0 6px,oklch(0.8 0.09 84/.06) 6px 7px),repeating-linear-gradient(-58deg,transparent 0 10px,oklch(0.8 0.09 84/.05) 10px 11px);}
body.luxe .memcard>*{position:relative;z-index:1;}
body.luxe .memcard .mono{font:var(--label);letter-spacing:var(--label-track);text-transform:uppercase;color:var(--text-muted);}
body.luxe .memcard .mk-lg{width:30px;height:30px;border-radius:8px;background:linear-gradient(150deg,var(--gold),var(--gold-deep));display:flex;align-items:center;justify-content:center;color:#fff;font:500 15px var(--font-serif);box-shadow:var(--l-sh-sm);flex:none;}

/* ---- plan cards ---- */
body.luxe .chip{font:var(--label);letter-spacing:var(--label-track);text-transform:uppercase;border-radius:var(--radius-pill);padding:5px 12px;white-space:nowrap;}
body.luxe .plan-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));align-items:stretch;}
body.luxe .plan-card{display:flex;flex-direction:column;gap:7px;position:relative;}
body.luxe .plan-name{font:500 20px/1 var(--font-serif);color:var(--text-strong);}
body.luxe .price b{font:500 24px/1 var(--font-serif);color:var(--text-strong);}
body.luxe .price .per{color:var(--text-muted);font:var(--text-sm);}
body.luxe .feat-lead{font:var(--text-sm);color:var(--text-strong);font-weight:500;}
body.luxe .feat{list-style:none;margin:11px 0 0;padding:0;display:flex;flex-direction:column;gap:8px;}
body.luxe .feat li{display:flex;gap:9px;align-items:flex-start;font:var(--text-sm);color:var(--text-body);}
body.luxe .feat li::before{content:"";flex:none;width:15px;height:15px;margin-top:1px;background:var(--gold-text);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/13px no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/13px no-repeat;}
body.luxe .feat li.hi{color:var(--text-strong);font-weight:500;}
body.luxe .best-for{font:var(--text-sm);color:var(--text-faint);margin-top:13px;}
body.luxe .ribbon{position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:linear-gradient(150deg,var(--gold),var(--gold-deep));color:#fff;font:var(--label);letter-spacing:var(--label-track);text-transform:uppercase;padding:4px 12px;border-radius:var(--radius-pill);box-shadow:var(--l-sh-sm);white-space:nowrap;}
body.luxe .meter{height:8px;border-radius:var(--radius-pill);background:var(--surface-inset);overflow:hidden;box-shadow:inset 0 1px 2px oklch(0.3 0.02 70/.08);}
body.luxe .meter>i{display:block;height:100%;border-radius:var(--radius-pill);background:linear-gradient(90deg,var(--gold),var(--gold-deep));}

/* ---- Data & privacy section headings get an editorial gold rule ---- */
body.luxe .sec-head{display:flex;align-items:center;gap:16px;margin:0 0 18px;}
body.luxe .sec-head h2{font:500 22px/1.1 var(--font-serif);letter-spacing:-.005em;color:var(--text-strong);margin:0;white-space:nowrap;}
body.luxe .sec-head .rule{flex:1;height:1px;background:linear-gradient(90deg,var(--gold-line),transparent);}

/* respect users who prefer less motion */
@media (prefers-reduced-motion: reduce){
  .acct-tabs .acct-thumb,.acct-panel,body.luxe .btn{transition:none !important;animation:none !important;}
}