/* VELORA GEM AND JEWELRY — design foundation (Stage 2)
   1 tokens · 2 base · 3 layout · 4 components · 5 legacy page blocks (kept for other stages) · 6 utilities
   Mobile-first. Breakpoints: 480 / 768 / 1024 / 1280. No !important. */

/* ───────── 1. TOKENS (contract §3) ───────── */
:root{
  --tgs-violet-950:#150A2E;--tgs-violet-900:#2A0F5C;--tgs-violet-800:#3B0A7A;--tgs-violet-700:#5B21B6;
  --tgs-violet-600:#7C3AED;--tgs-violet-500:#8B5CF6;--tgs-orchid:#C084FC;--tgs-violet-200:#DDD6FE;
  --tgs-violet-100:#EDE9FE;--tgs-violet-50:#F6F2FF;
  --tgs-bg:#FAF8FF;--tgs-white:#FFFFFF;--tgs-ink:#1B1030;--tgs-muted:#6B6485;--tgs-line:#E7E0F7;
  --tgs-gold:#C9A24B;
  --tgs-ok:#1F7A55;--tgs-warn:#8A5A00;--tgs-bad:#B3261E;
  --tgs-grad-primary:linear-gradient(135deg,#3B0A7A,#5B21B6 50%,#8B5CF6);
  --tgs-grad-dark:linear-gradient(160deg,#150A2E,#2A0F5C 60%,#4C1D95);
  --tgs-grad-text:linear-gradient(90deg,#5B21B6,#C084FC);
  --tgs-r-sm:.75rem;--tgs-r-md:1.25rem;--tgs-r-lg:1.75rem;--tgs-r-pill:999px;
  --tgs-shadow-sm:0 6px 20px rgba(91,33,182,.08);--tgs-shadow-md:0 20px 60px rgba(91,33,182,.14);
  --tgs-shadow-glow:0 10px 40px rgba(139,92,246,.45);
  --tgs-ease:cubic-bezier(.22,1,.36,1);
  --tgs-gutter:clamp(1rem,4vw,2rem);--tgs-section-y:clamp(3.5rem,8vw,8.75rem);--tgs-container:80rem;
  --tgs-tap:2.75rem;
  --tgs-step--1:clamp(.8125rem,.79rem + .12vw,.875rem);--tgs-step-0:clamp(1rem,.96rem + .2vw,1.125rem);
  --tgs-step-1:clamp(1.25rem,1.15rem + .5vw,1.5rem);--tgs-step-2:clamp(1.6rem,1.4rem + 1vw,2.25rem);
  --tgs-step-3:clamp(2rem,1.6rem + 2vw,3.5rem);--tgs-step-4:clamp(2.5rem,1.8rem + 3.5vw,5.5rem);
  --tgs-font-head:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --tgs-font-body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --tgs-nav-height:5rem;           /* site-nav.js keeps this equal to the real bar height */
  --tgs-shimmer:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.38) 50%,transparent 70%);

  /* legacy names — values are the premium purple theme that used to win the cascade */
  --bg:#FBF9FF;--surface:#fff;--surface2:#F6F1FF;--surface-soft:#F6F1FF;--surface-lilac:#F7F2FF;
  --text:#241536;--ink:#241536;--muted:#65566F;--line:#E5D5FF;
  --purple:#A855F7;--purple-2:#8B5CF6;--purple-3:#C026D3;--deep-purple:#5B21B6;
  --midnight:#19082F;--midnight-violet:#19082F;--dark-bg:#10071F;--blue:#2A0F5C;
  --gold:#C49A4D;--gold2:#EFD39A;--green:#1F7A55;--red:#B3261E;--ok:#1F7A55;--bad:#B3261E;--white:#fff;
  --shadow:0 24px 70px rgba(91,33,182,.14);--shadow-md:0 20px 60px rgba(91,33,182,.14);
  --radius:1.125rem;--max:82.5rem;--ease:cubic-bezier(.22,1,.36,1);
  --grad-primary:var(--tgs-grad-primary);--grad-dark:var(--tgs-grad-dark);--grad-text:var(--tgs-grad-text);
  --violet-950:#150A2E;--violet-900:#2A0F5C;--violet-800:#3B0A7A;--violet-700:#5B21B6;--violet-500:#8B5CF6;
  --violet-100:#EDE9FE;--violet-50:#F6F2FF;--orchid:#C084FC;
}

/* ───────── 2. BASE ───────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--tgs-nav-height) + 1rem);background:var(--tgs-bg)}
body{margin:0;min-width:0;overflow-x:clip;background:var(--bg);color:var(--text);font-family:var(--tgs-font-body);font-size:1rem;line-height:1.6;text-rendering:optimizeLegibility;padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px)}
body:not(.admin-screen){background:linear-gradient(180deg,#fff 0,var(--tgs-bg) 28%,#F8F3FF 100%)}
main{display:block;min-width:0}
img,svg,video,canvas{max-width:100%;height:auto}
img{display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
h1,h2,h3,h4{font-family:var(--tgs-font-head);font-weight:500;letter-spacing:-.02em;line-height:1.05;margin:0 0 .5em;text-wrap:balance;overflow-wrap:break-word}
h1{font-size:var(--tgs-step-4);line-height:.98}
h2{font-size:var(--tgs-step-3)}
h3{font-size:var(--tgs-step-1);line-height:1.15}
h4{font-size:1.0625rem}
h1 em,h2 em{font-style:italic;background:var(--tgs-grad-text);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;padding-inline-end:.06em}
p,li{overflow-wrap:break-word}
:where(p){margin:0 0 1em}
[hidden]{display:none}
::selection{background:var(--tgs-violet-200);color:var(--tgs-violet-950)}

/* focus ring on everything interactive (contract §3.8) */
:focus-visible{outline:2px solid var(--tgs-violet-600);outline-offset:3px;border-radius:.25rem}
:focus:not(:focus-visible){outline:0}

/* ───────── 3. LAYOUT ───────── */
.container,.blogWrap{width:min(100% - 2 * var(--tgs-gutter),var(--max));margin-inline:auto}
.section{padding-block:var(--tgs-section-y);position:relative}
.sectionHead{display:grid;gap:.75rem;margin-bottom:clamp(1.5rem,4vw,2.75rem)}
.sectionHead>*{min-width:0}
.sectionHead h2{margin:.35rem 0 0}
.sectionHead p{color:var(--muted);max-width:36rem;margin:0}
.grid,.grid4,.catalogGrid,.storyGrid,.split,.auctionGrid,.calcGrid,.formGrid,.stats,.adminLayout{display:grid;gap:1rem;grid-template-columns:minmax(0,1fr)}
.grid>*,.grid4>*,.catalogGrid>*,.storyGrid>*,.split>*,.auctionGrid>*,.calcGrid>*,.formGrid>*,.stats>*,.adminLayout>*{min-width:0}
.catalogGrid{grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr));gap:1.25rem}
.storyGrid{gap:clamp(1.5rem,5vw,4.5rem);align-items:start}
.actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.5rem}
.filters{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:1.25rem}
.full{grid-column:1/-1}
.stats{grid-template-columns:repeat(2,minmax(0,1fr));margin-block:1.25rem}

/* ───────── 4. COMPONENTS ───────── */
.kicker,.meta{font-size:.75rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--tgs-violet-600)}
.meta{letter-spacing:.14em}
.muted{color:var(--muted);line-height:1.75}

/* buttons: ghost → primary (violet gradient + shimmer) → dark */
.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:var(--tgs-tap);padding:.7rem 1.25rem;border-radius:var(--tgs-r-sm);border:1px solid rgba(111,70,199,.24);background:#fff;color:var(--tgs-ink);font-size:.875rem;font-weight:700;letter-spacing:.01em;line-height:1.2;text-align:center;box-shadow:var(--tgs-shadow-sm);transition:transform .3s var(--tgs-ease),box-shadow .3s var(--tgs-ease),border-color .3s,background-color .3s}
.btn.primary{border-color:transparent;background:var(--tgs-grad-primary);color:#fff;box-shadow:0 14px 34px rgba(91,33,182,.28)}
.btn.primary::after{content:"";position:absolute;inset:0;background:var(--tgs-shimmer);transform:translateX(-120%);pointer-events:none}
.btn.dark{background:var(--tgs-violet-950);border-color:var(--tgs-violet-950);color:#fff}
.btn:active{transform:translateY(1px) scale(.99)}
.btn:disabled,.btn[aria-disabled=true]{opacity:.55;cursor:not-allowed}

.card,.panel,.feature{background:rgba(255,255,255,.92);border:1px solid rgba(111,70,199,.16);border-radius:var(--radius);padding:clamp(1.1rem,3vw,1.6rem);box-shadow:var(--tgs-shadow-sm);transition:transform .45s var(--tgs-ease),box-shadow .45s var(--tgs-ease),border-color .3s}
.feature{padding:clamp(1.4rem,4vw,2.25rem)}
.card h3{font-size:1.5rem;margin:.3rem 0 .5rem}
.gemVisual{height:12.5rem;border-radius:var(--tgs-r-sm);margin-bottom:1.1rem;position:relative;overflow:hidden;background:linear-gradient(135deg,#E6EDF6,#7189AD 48%,#17273C);box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
.gemVisual::before{content:"";position:absolute;width:48%;height:72%;left:26%;top:15%;clip-path:polygon(50% 0,100% 31%,80% 100%,20% 100%,0 31%);background:linear-gradient(135deg,rgba(255,255,255,.8),rgba(255,255,255,.1))}
.gemVisual.gold{background:linear-gradient(135deg,#F3E8CA,#B88932,#443315)}
.gemVisual.purple{background:linear-gradient(135deg,#E6D9F1,#81589B,#291C39)}
.gemVisual.green{background:linear-gradient(135deg,#D9EEE4,#4F9877,#173C2E)}
.tag,.badge{display:inline-flex;align-items:center;padding:.3rem .65rem;border-radius:var(--tgs-r-pill);border:1px solid var(--line);background:var(--tgs-violet-50);font-size:.75rem;line-height:1.3;color:#5B4A78}
.tag{margin:.3rem .3rem 0 0}
.timeline{border-left:1px solid var(--tgs-violet-200);padding-left:1.6rem}
.step{position:relative;padding-bottom:1.7rem}
.step::before{content:"";position:absolute;left:-1.95rem;top:.45rem;width:.6rem;height:.6rem;border-radius:50%;background:var(--tgs-violet-600);box-shadow:0 0 0 5px rgba(139,92,246,.16)}
.step b{font-size:.75rem;color:var(--tgs-violet-600);letter-spacing:.14em}
.step h3{font-size:1.5rem;margin:.3rem 0}
.notice{padding:.9rem 1rem;border-left:3px solid var(--tgs-gold);background:var(--tgs-violet-50);border-radius:.5rem;color:#4A3D63}

/* forms: 16px keeps iOS from zooming (contract §3.4) */
.input,.select,.textarea{display:block;width:100%;min-height:var(--tgs-tap);border:1px solid var(--line);background:#fff;border-radius:var(--tgs-r-sm);padding:.7rem .9rem;font-size:1rem;color:var(--text);transition:border-color .25s,box-shadow .25s}
.input:focus,.select:focus,.textarea:focus{border-color:var(--tgs-violet-500);box-shadow:0 0 0 4px rgba(139,92,246,.18);outline:0}
.filters .input,.filters .select{max-width:none}

.tableWrap{max-width:100%;overflow:auto;border:1px solid var(--line);border-radius:1rem;-webkit-overflow-scrolling:touch}
.table{width:100%;border-collapse:collapse;min-width:42rem}
.table th,.table td{padding:.75rem;border-bottom:1px solid var(--line);text-align:left;font-size:.875rem}
.table th{font-size:.75rem;text-transform:uppercase;color:var(--muted);letter-spacing:.08em;background:var(--tgs-violet-50)}

.lotVisual{min-height:18.75rem;border-radius:1.5rem;background:radial-gradient(circle at 40% 30%,rgba(255,255,255,.6),rgba(255,255,255,0) 20%),var(--tgs-grad-dark);padding:1.75rem;display:flex;align-items:flex-end;color:#fff;box-shadow:var(--shadow)}
.modal{position:fixed;inset:0;background:rgba(21,10,46,.55);z-index:1200;padding:max(1rem,env(safe-area-inset-top,0px)) 1rem max(1rem,env(safe-area-inset-bottom,0px));overflow:auto}
.modalBox{max-width:53rem;margin:2rem auto;background:#fff;border:1px solid var(--line);border-radius:1.25rem;padding:clamp(1rem,3vw,1.5rem)}

/* entrance animation (CSS only, so it works without JS) */
.animate{animation:tgsRise .7s var(--tgs-ease) both}
.d1{animation-delay:.08s}.d2{animation-delay:.16s}.d3{animation-delay:.24s}
@keyframes tgsRise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* ───────── 5. LEGACY PAGE BLOCKS (kept working for other stages; owners may move them) ───────── */
/* toolNav / calculator (Stage 5) */
.toolNav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem;margin-bottom:1.25rem}
.toolNav a{display:flex;align-items:center;justify-content:center;min-height:var(--tgs-tap);padding:.6rem;border:1px solid var(--line);background:#fff;border-radius:var(--tgs-r-sm);font-size:.8125rem;text-align:center}
.toolNav a.active{border-color:var(--tgs-violet-500);color:var(--tgs-violet-700);background:var(--tgs-violet-50)}
.calcWrap{max-width:86.25rem;margin:auto;padding:.75rem}
.calcTop{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;margin-bottom:1rem}
.calcBrand{font-weight:900;letter-spacing:.18em}
.calcSub{font-size:.75rem;color:var(--muted);letter-spacing:.14em}
.calcHero{padding:1.35rem;border-radius:1.25rem;background:linear-gradient(120deg,rgba(139,92,246,.1),rgba(192,132,252,.07));border:1px solid rgba(139,92,246,.26);margin-bottom:1rem}
.calcCard{background:#fff;border:1px solid var(--line);border-radius:1.25rem;padding:1.1rem;box-shadow:var(--shadow)}
.calcForm{display:grid;grid-template-columns:minmax(0,1fr);gap:.75rem}
.calcField{min-width:0}
.calcField label{display:block;color:var(--muted);font-size:.75rem;margin-bottom:.4rem}
.calcField input,.calcField select{width:100%;min-height:var(--tgs-tap);padding:.6rem .7rem;border-radius:var(--tgs-r-sm);border:1px solid var(--line);background:var(--tgs-violet-50);color:var(--text);font-size:1rem}
.calcWide{grid-column:1/-1}
.calcMode{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem;margin-bottom:1rem}
.calcMode button{min-height:var(--tgs-tap);border:1px solid var(--line);background:#fff;border-radius:var(--tgs-r-sm);padding:.6rem}
.calcMode button.active{border-color:var(--tgs-violet-500);color:var(--tgs-violet-700);background:var(--tgs-violet-50)}
.metrics{display:grid;grid-template-columns:minmax(0,1fr);gap:.55rem}
.metric{padding:.8rem;border:1px solid var(--line);border-radius:.875rem;background:var(--tgs-violet-50);min-width:0}
.metric span{display:block;color:var(--muted);font-size:.75rem;text-transform:uppercase;letter-spacing:.1em}
.metric strong{display:block;font-size:1.1875rem;margin-top:.25rem;overflow-wrap:anywhere}
.decision{margin-top:.9rem;padding:1.1rem;border-radius:1rem;border:1px solid var(--line)}
.decision.buy{border-color:rgba(31,122,85,.5);background:#F0FAF5}
.decision.negotiate{border-color:rgba(138,90,0,.4);background:#FBF6EA}
.decision.walk{border-color:rgba(179,38,30,.4);background:#FFF3F3}
.status{font-weight:900;letter-spacing:.12em}
.ladder{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem}
.ladder .metric strong{font-size:1rem}
.calcFooter{margin:1.25rem 0;color:var(--muted);font-size:.75rem}
/* admin shell helpers (Stage 1) */
.adminSide{height:max-content}
.adminSide button{display:block;width:100%;text-align:left;min-height:var(--tgs-tap);margin-bottom:.45rem}
.adminSide button.active{border-color:var(--tgs-violet-500);color:var(--tgs-violet-700);background:var(--tgs-violet-50)}
.adminSection{display:none}.adminSection.active{display:block}
.stat{padding:1.1rem;background:#fff;border:1px solid var(--line);border-radius:1rem;box-shadow:var(--shadow)}
.stat b{display:block;font-size:1.75rem;color:var(--tgs-violet-700)}
.stat small{color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-size:.75rem}

/* ───────── 6. HOVER (touch-safe) + utilities ───────── */
@media (hover:hover){
  .btn:hover{transform:translateY(-2px);box-shadow:var(--tgs-shadow-md);border-color:var(--tgs-violet-500)}
  .btn.primary:hover{box-shadow:var(--tgs-shadow-glow)}
  .btn.primary:hover::after{transform:translateX(120%);transition:transform .8s var(--tgs-ease)}
  .card:hover,.feature:hover{transform:translateY(-4px);box-shadow:var(--tgs-shadow-md);border-color:rgba(139,92,246,.45)}
}
.hidden:not(#tgs-never){display:none}   /* ID-level specificity trick replaces !important; engines toggle .hidden */

/* ───────── breakpoints: 480 / 768 / 1024 / 1280 ───────── */
@media (min-width:480px){
  .metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
  .calcWrap{padding:1.25rem}
}
@media (min-width:768px){
  .sectionHead{grid-template-columns:minmax(0,1fr) minmax(0,28rem);align-items:end;gap:2rem}
  .grid,.grid4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .split,.formGrid,.storyGrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .calcForm{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ladder{grid-template-columns:repeat(4,minmax(0,1fr))}
  .stats{grid-template-columns:repeat(4,minmax(0,1fr))}
  .toolNav{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:1024px){
  .grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .grid4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .auctionGrid{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}
  .calcGrid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
  .adminLayout{grid-template-columns:14.5rem minmax(0,1fr);gap:1.25rem}
  .adminSide{position:sticky;top:calc(var(--tgs-nav-height) + 1rem)}
  .toolNav{grid-template-columns:repeat(5,minmax(0,1fr))}
  .filters .input{max-width:20.5rem}.filters .select{max-width:14rem}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
}