@import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,400&family=Inter:wght@400;500;600;700;800&display=swap");

/* ===== Atelier — editorial light skin, expressed ENTIRELY as token reassignments.
   Every token below is read by landing.html and/or ui.html; reassigning it here
   reskins the page with zero element selectors. Tokens whose Atelier value already
   equals the Midnight default are omitted. A short residual block at the end holds
   the handful of pseudo-element / :hover / deep studio-FRD retints that have no
   token to ride on. ===== */
body.theme-atelier{
  /* ── base palette (shared color tokens) ── */
  --bg:#f7f2e9; --panel:#ffffff; --panel2:#f3ece0; --line:#e8e0d1; --line2:#dccfba;
  --text:#211b15; --muted:#6f6557; --brand:#c0613b; --brand2:#a8482a;
  --cyan:#7d8a6a; --teal:#7d8a6a; --amber:#cf9445; --rose:#c0613b; --ok:#5e7d52;
  --focus-ring:rgba(192,97,59,.20); --prompt-shadow:0 24px 60px rgba(80,60,30,.16); --logo-extrude:rgba(192,97,59,.32); --logo-ext:#14100a;

  /* ── passthrough tokens: re-bind in Atelier scope so muted/accent text resolves to
        the warm Atelier palette (a :root passthrough bakes the Midnight value). ── */
  --sub-color:var(--muted); --microcopy-color:var(--muted); --url-color:var(--muted);
  --stat-l-color:var(--muted); --sechead-p-color:var(--muted); --muted-soft:var(--muted);
  --ck-color:var(--ok); --bot-accent:linear-gradient(180deg,var(--brand),var(--cyan));

  /* ── typography (both pages) ── */
  --font-body:'Inter',system-ui,sans-serif;
  --font-display:'Fraunces','Instrument Serif',Georgia,serif;
  --display-weight:500; --display-spacing:-.5px;
  --heading-font:var(--font-display);
  --heading-base-weight:500; --heading-base-spacing:-.5px;
  --hero-h1-weight:600; --hero-h1-spacing:-1.5px;
  --sechead-h2-weight:500; --sechead-h2-spacing:-.5px;
  --split-h2-weight:500; --split-h2-spacing:-.5px;
  --bigcta-h2-weight:500; --bigcta-h2-spacing:-.5px;
  --hero-serif-style:italic; --hero-serif-color:var(--brand);
  --bigcta-serif-style:italic;

  /* ── shared accents / page background (both pages) ── */
  --page-bg:radial-gradient(900px 520px at 84% -12%, rgba(192,97,59,.10), transparent 60%),
            radial-gradient(760px 520px at -6% 6%, rgba(125,138,106,.10), transparent 58%);
  --grad-text:linear-gradient(110deg,var(--brand),#d4843f 60%,var(--cyan));
  --accent-grad:linear-gradient(135deg,var(--brand),#d4843f);

  /* ── MARKETING (landing.html) ── */
  --nav-bg:rgba(247,242,233,.82); --nav-border:var(--line);
  --logo-b-color:var(--brand);
  --btn-bg:var(--brand); --btn-color:#fff; --btn-radius:8px; --btn-weight:600;
  --btn-shadow:0 8px 22px rgba(192,97,59,.26); --btn-shadow-hover:0 14px 32px rgba(192,97,59,.34);
  --btn-ghost-bg:#fff; --btn-ghost-color:var(--text); --btn-ghost-border:1px solid var(--line2);
  --btn-ghost-shadow:none; --btn-ghost-bg-hover:#fbf7ef;
  --eyebrow-bg:#fff; --eyebrow-border:1px solid var(--line2); --eyebrow-color:var(--brand);
  --orb-display:none;
  --demo-glow-bg:linear-gradient(120deg,rgba(192,97,59,.5),rgba(125,138,106,.45)); --demo-glow-opacity:.5; --demo-glow-blur:30px;
  --browser-bg:#fff; --browser-border:1px solid var(--line2); --shadow-frame:0 40px 90px rgba(80,60,30,.18);
  --bbar-bg:#f3ece0; --bbar-border:1px solid var(--line);
  --url-bg:#fff; --url-border:1px solid var(--line);
  --chatcol-bg:#fbf7ef; --chatcol-border:1px solid var(--line);
  --bot-bg:#fff; --bot-border:1px solid var(--line); --bot-color:var(--text);
  --me-bg:var(--brand); --me-color:#fff;
  --stat-bg:#fff; --stat-border:1px solid var(--line); --stat-shadow:0 10px 26px rgba(80,60,30,.06);
  --kick-color:var(--brand);
  --card-bg:#fff; --card-border:1px solid var(--line); --shadow-card:0 14px 36px rgba(80,60,30,.07);
  --shot-bg:#fff; --shot-border:1px solid var(--line); --shot-shadow:0 14px 36px rgba(80,60,30,.07);
  --step-hover-border:var(--line2);
  --ico-bg:#f6efe2; --ico-border:1px solid var(--line2);
  --num-color:var(--brand); --num-weight:700;
  --twincard-shadow:0 14px 36px rgba(80,60,30,.07); --row-border:1px solid var(--line);
  --badge-bg:#f6efe2; --badge-border:1px solid var(--line2);
  --real-bg:linear-gradient(180deg,transparent,rgba(125,138,106,.07),transparent);
  --shotbar-bg:#f3ece0; --shotbar-border:1px solid var(--line);
  --bigcta-bg:linear-gradient(120deg,#7d3f26,#b65a32 58%,#cf8a4a); --bigcta-border:1px solid #d8cfba;
  --bigcta-orb:radial-gradient(circle,rgba(247,242,233,.5),transparent 60%);
  --bigcta-h2-color:#fff8ef; --bigcta-p-color:#f6e7d6;
  --bigcta-btn-bg:#fff; --bigcta-btn-color:#a8482a;
  --footer-color:var(--muted); --footer-border:1px solid var(--line);

  /* ── BUILDER (ui.html) ── */
  --top-bg:rgba(255,255,255,.7);
  --pill-bg:#fff; --pill-border:1px solid var(--line); --pill-color:var(--muted);
  --publish-radius:8px;
  --chat-bg:linear-gradient(180deg,#fbf7ef,#f7f2e9);
  --agenthead-bg:linear-gradient(120deg,rgba(192,97,59,.08),rgba(125,138,106,.06),transparent);
  --orb-after-bg:#fbf7ef;
  --chip-bg:#fff; --chip-border:1px solid var(--line2); --chip-color:var(--text);
  --scard-bg:#fff; --scard-border:1px solid var(--line);
  --scard-si-bg:#f6efe2; --scard-si-border:1px solid var(--line2);
  --input-bg:#fff; --input-border:1px solid var(--line2); --input-color:var(--text);
  --gate-bg:linear-gradient(135deg,rgba(192,97,59,.12),rgba(125,138,106,.08)); --gate-border:1px solid rgba(192,97,59,.34);
  --cue-shadow:0 10px 26px rgba(192,97,59,.4); --cue-arrow:var(--brand);
  --frame-shadow:0 30px 70px rgba(80,60,30,.16),0 0 0 1px var(--line2);
  --empty-bg:radial-gradient(700px 400px at 50% 0%, #fbf3e8, #fff);
  --cap-color:var(--muted); --cap-b-color:var(--brand); --typer-color:var(--brand);
  --devbar-bg:#fff; --devbar-border:1px solid var(--line2);
  --plan-bg:#fff; --plan-border:1px solid var(--line);
  --plan-act-bg:#fbf7ef; --plan-tweak-bg:#fff; --plan-tweak-border:1px solid var(--line2);
  --needs-bg:#fff5ec; --needs-border:1px solid #f0dcc4;
  --feat-on-border:var(--brand); --feat-on-bg:#fdf4ee;
  --sheet-bg:#fff; --sheet-border:1px solid var(--line2);
  --opt-bg:#fbf7ef; --opt-border:1px solid var(--line2);
}

/* ── Residual structural rules (no token to ride on): pseudo-element / :hover /
   deep studio-&-FRD light internals. These never touch the Midnight baseline. ── */
.theme-atelier .chip:hover{background:#fdf2ec !important}
.theme-atelier .scard:hover{background:#fdf7f1 !important}
.theme-atelier .opt:hover{background:#fdf4ee !important}
.theme-atelier .chatgate .gt{color:#7d3f26 !important}
.theme-atelier .chatgate .gunlock{background:#fff !important;border:1px solid var(--line2) !important;color:var(--text) !important}
.theme-atelier textarea::placeholder{color:#a99f8e}
.theme-atelier .st-scope button.sel{color:var(--brand) !important}
.theme-atelier .st-table b,.theme-atelier .frd-doc h2,.theme-atelier .frd-doc .role b{color:var(--brand) !important}
.theme-atelier .frd-doc li:before{color:var(--ok) !important}