/* ============================================================
   EDEN LEVI — DESIGN LAB · CORE
   4 color kits · dark(default)/light · Heebo + Assistant · RTL
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@200;300;400;500;600;700;800;900&family=Assistant:wght@200;300;400;500;600;700;800&family=Frank+Ruhl+Libre:wght@300;400;500;700;800;900&display=swap');

/* ---------- KIT 1 · OBSIDIAN & GOLD (default) ---------- */
:root,[data-kit="obsidian"]{
  --k-name:"אובסידיאן וזהב";
  --accent:#d4af37; --accent-2:#f3dd8f; --accent-3:#a9791a; --on-accent:#1a1305;
  --grad:linear-gradient(135deg,#a9791a,#e7c85f 40%,#f9edc0 55%,#c9a02e);
}
[data-kit="obsidian"][data-theme="dark"],
:root[data-theme="dark"]{
  --bg:#08080a; --bg2:#0e0e11; --bg3:#15151a; --surf:#131317; --surf2:#1b1b21;
  --text:#f6f4ef; --text2:rgba(246,244,239,.72); --text3:rgba(246,244,239,.45);
  --line:rgba(255,255,255,.10); --line2:rgba(255,255,255,.18);
  --glow:rgba(212,175,55,.16);
}
[data-kit="obsidian"][data-theme="light"]{
  --bg:#fbf9f4; --bg2:#f4f0e7; --bg3:#ece6d9; --surf:#fff; --surf2:#f7f4ec;
  --text:#121215; --text2:#4d4a42; --text3:#8b8577;
  --line:rgba(18,18,21,.10); --line2:rgba(18,18,21,.18);
  --glow:rgba(180,134,11,.12); --accent:#a9791a; --accent-2:#c9a02e;
}

/* ---------- KIT 2 · MIDNIGHT & CHAMPAGNE ---------- */
[data-kit="midnight"]{
  --k-name:"חצות ושמפניה";
  --accent:#cbb583; --accent-2:#e8dcbb; --accent-3:#9c8757; --on-accent:#0b1424;
  --grad:linear-gradient(135deg,#8d7a4d,#cbb583 42%,#efe6cb 56%,#a58f5d);
}
[data-kit="midnight"][data-theme="dark"]{
  --bg:#060b14; --bg2:#0a1220; --bg3:#101b2d; --surf:#0d1626; --surf2:#152238;
  --text:#f2f4f8; --text2:rgba(242,244,248,.72); --text3:rgba(242,244,248,.45);
  --line:rgba(203,181,131,.14); --line2:rgba(203,181,131,.26);
  --glow:rgba(203,181,131,.14);
}
[data-kit="midnight"][data-theme="light"]{
  --bg:#f8fafc; --bg2:#eef2f8; --bg3:#e2e9f3; --surf:#fff; --surf2:#f3f6fb;
  --text:#0b1424; --text2:#3f4c60; --text3:#7c8798;
  --line:rgba(11,20,36,.10); --line2:rgba(11,20,36,.18);
  --glow:rgba(156,135,87,.12); --accent:#8d7a4d; --accent-2:#a58f5d;
}

/* ---------- KIT 3 · EMERALD & BRASS ---------- */
[data-kit="emerald"]{
  --k-name:"אמרלד ופליז";
  --accent:#c9a227; --accent-2:#ecd98a; --accent-3:#8f7118; --on-accent:#04140f;
  --grad:linear-gradient(135deg,#7d6216,#c9a227 44%,#f0e0a2 58%,#9b7c1c);
}
[data-kit="emerald"][data-theme="dark"]{
  --bg:#03110d; --bg2:#061913; --bg3:#0a241b; --surf:#071d16; --surf2:#0d2c22;
  --text:#eef6f2; --text2:rgba(238,246,242,.72); --text3:rgba(238,246,242,.45);
  --line:rgba(201,162,39,.14); --line2:rgba(201,162,39,.26);
  --glow:rgba(201,162,39,.14);
}
[data-kit="emerald"][data-theme="light"]{
  --bg:#f7faf8; --bg2:#eaf2ed; --bg3:#dbe9e1; --surf:#fff; --surf2:#f1f7f3;
  --text:#062018; --text2:#375146; --text3:#71887d;
  --line:rgba(6,32,24,.10); --line2:rgba(6,32,24,.18);
  --glow:rgba(143,113,24,.12); --accent:#7d6216; --accent-2:#9b7c1c;
}

/* ---------- KIT 4 · CHARCOAL & BORDEAUX ---------- */
[data-kit="bordeaux"]{
  --k-name:"פחם ובורדו";
  --accent:#b8894f; --accent-2:#e2bd8b; --accent-3:#7e2436; --on-accent:#1a0d10;
  --grad:linear-gradient(135deg,#7e2436,#b8894f 45%,#e8cba1 60%,#8f3143);
}
[data-kit="bordeaux"][data-theme="dark"]{
  --bg:#0b0809; --bg2:#120d0f; --bg3:#1b1316; --surf:#151011; --surf2:#20171a;
  --text:#f7f3f1; --text2:rgba(247,243,241,.72); --text3:rgba(247,243,241,.45);
  --line:rgba(255,255,255,.10); --line2:rgba(184,137,79,.28);
  --glow:rgba(126,36,54,.20);
}
[data-kit="bordeaux"][data-theme="light"]{
  --bg:#fbf8f6; --bg2:#f3ece8; --bg3:#e9ded8; --surf:#fff; --surf2:#f8f2ee;
  --text:#171112; --text2:#4f4241; --text3:#8a7a76;
  --line:rgba(23,17,18,.10); --line2:rgba(126,36,54,.22);
  --glow:rgba(126,36,54,.10); --accent:#7e2436; --accent-2:#b8894f;
}

/* ---------- FONTS ---------- */
:root,[data-font="heebo"]{ --ui:"Heebo",system-ui,sans-serif; }
[data-font="assistant"]{ --ui:"Assistant",system-ui,sans-serif; }
:root{ --display:"Frank Ruhl Libre",Georgia,serif; }

/* ---------- RESET ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--ui); font-weight:400; line-height:1.7;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden; transition:background .5s,color .5s;
}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4{margin:0;line-height:1.08;font-weight:800;letter-spacing:-.02em}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
::selection{background:var(--accent);color:var(--on-accent)}

/* ---------- PRIMITIVES ---------- */
.wrap{width:100%;max-width:1280px;margin-inline:auto;padding-inline:clamp(20px,5vw,56px)}
.wrap-n{max-width:1080px}
.gold{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.serif{font-family:var(--display)}
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;font-size:.74rem;font-weight:600;
  letter-spacing:.24em;text-transform:uppercase;color:var(--accent);
}
.eyebrow::before{content:"";width:28px;height:1px;background:var(--grad)}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:15px 30px;border-radius:999px;font-weight:600;font-size:.95rem;
  border:1px solid transparent;transition:transform .45s cubic-bezier(.19,1,.22,1),box-shadow .45s,background .3s,color .3s,border-color .3s;
}
.btn:hover{transform:translateY(-2px)}
.btn-p{background:var(--grad);color:var(--on-accent);background-size:180%;box-shadow:0 10px 30px var(--glow)}
.btn-p:hover{background-position:100%;box-shadow:0 16px 44px var(--glow)}
.btn-o{border-color:var(--line2);color:var(--text)}
.btn-o:hover{border-color:var(--accent);color:var(--accent)}
.btn-sq{border-radius:6px}
.card{background:var(--surf);border:1px solid var(--line);border-radius:20px;padding:32px}
.hr{height:1px;background:var(--line);border:0}

/* photo slots — elegant until real images are dropped in */
.ph{position:relative;overflow:hidden;background:var(--surf2);isolation:isolate}
.ph img{width:100%;height:100%;object-fit:cover;object-position:50% 18%}
.ph::after{
  content:attr(data-ph);position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--display);font-size:.9rem;letter-spacing:.14em;color:var(--text3);
  background:
    linear-gradient(135deg,transparent 48%,var(--line) 48%,var(--line) 52%,transparent 52%) 0 0/22px 22px,
    var(--surf2);
  opacity:0;transition:opacity .3s;pointer-events:none;
}
.ph.empty::after{opacity:1}
.ph.empty img{opacity:0}

/* reveal */
.rv{opacity:0;transform:translateY(26px);transition:opacity .9s cubic-bezier(.19,1,.22,1),transform .9s cubic-bezier(.19,1,.22,1)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}*{animation-duration:.01ms!important}}

/* ---------- LAB CONTROL BAR (injected by lab.js) ---------- */
#labbar{
  position:fixed;inset-block-end:16px;inset-inline-start:50%;translate:-50% 0;z-index:9999;
  display:flex;align-items:center;gap:6px;padding:8px 10px;border-radius:999px;
  background:color-mix(in srgb,var(--surf) 82%,transparent);
  border:1px solid var(--line2);backdrop-filter:blur(18px) saturate(160%);
  box-shadow:0 18px 50px rgba(0,0,0,.35);font-size:.78rem;max-width:calc(100vw - 24px);
}
#labbar .sep{width:1px;height:20px;background:var(--line);margin-inline:4px}
#labbar button{
  padding:7px 11px;border-radius:999px;color:var(--text2);font-weight:600;
  font-size:.76rem;transition:.25s;white-space:nowrap;
}
#labbar button:hover{color:var(--text);background:var(--bg3)}
#labbar button[aria-pressed="true"]{background:var(--grad);color:var(--on-accent)}
#labbar .dot{width:15px;height:15px;border-radius:50%;padding:0;border:1px solid var(--line2)}
#labbar .dot[aria-pressed="true"]{outline:2px solid var(--accent);outline-offset:2px}
#labbar .back{color:var(--accent)}
@media(max-width:640px){#labbar{gap:3px;padding:6px}#labbar button{padding:6px 8px;font-size:.7rem}#labbar .lbl{display:none}}

#labbar .nmtag{
  padding:6px 12px;border-radius:999px;background:var(--grad);color:var(--on-accent);
  font-size:.7rem;font-weight:800;letter-spacing:.1em;white-space:nowrap;
}
@media(max-width:900px){#labbar .nmtag{display:none}}