/* White theme (Oct 23, Yasir): white pages, dark text, gold + pine green kept as accents.
   Loaded AFTER style.css on each page. To scope it (e.g. only the card or only the maker), drop the
   <link rel="stylesheet" href=".../theme-light.css"> from the pages that should stay dark green and set their
   theme-color meta back to #0f3324. The card picture art, the video looks and the rendered video are not affected. */
:root{
 --t-bg:#ffffff;        /* page */
 --t-text:#1c2b23;      /* body text (15.6:1 on white) */
 --t-head:#0f3324;      /* h1 / headings: pine */
 --t-accent:#7a5312;    /* dark gold for links, h2/h3, outline buttons (7.0:1) */
 --t-muted:#5a5142;     /* hints, counters, footer (7.6:1) */
 --t-field:#8f6a22;     /* form-field / outline-button borders (4.6:1, UI >= 3:1) */
 --t-line:rgba(201,154,62,.55); /* decorative gold rules and panel borders */
 --t-panel:#fdfaf2;     /* soft cream panels on the white page */
 --t-soft:#f4ecd9;      /* tabs, link box, quoted riddle */
 --t-focus:#0f3324;     /* focus rings + selected outline (13:1 on white and on cream) */
 --t-err-bg:#fdecea;--t-err:#8a1c13;--t-err-line:#c0392b;
 --t-shadow:rgba(60,40,10,.18)
}
body{color:var(--t-text);background:var(--t-bg)}
h1,h2,h3{color:var(--t-head)}
h2,h3{color:var(--t-accent)}
a{color:var(--t-accent)}
.brand{color:var(--t-accent)}
.lead{color:#33433a}
.panel{background:var(--t-panel);border-color:var(--t-line)}
label,.label{color:var(--t-text)}
.opt,.small,.count,#zoomVal{color:var(--t-muted)}
input[type=text],textarea,select{background:#fff;border-color:var(--t-field);color:var(--t-text)}
:focus-visible{outline-color:var(--t-focus)}
.count.over{color:var(--t-err)}
.field-error{color:var(--t-err);background:var(--t-err-bg);border-left-color:var(--t-err-line)}
.btn{box-shadow:0 4px 0 #8a6420,0 8px 18px var(--t-shadow)}
.btn.secondary{color:var(--t-accent);border-color:var(--t-field);background:#fff;box-shadow:none}
.btn[disabled]{opacity:1;background:#ece6d8;color:#5a5142;box-shadow:none}
.progress-steps{background:rgba(255,255,255,.95);border-bottom-color:var(--t-line)}
.progress-steps .bar,.vprogress{background:#ece4d0}
.progress-steps p{color:var(--t-muted)}
.pic{background:var(--t-panel);color:var(--t-text);border-color:rgba(201,154,62,.45)}
.pic[aria-checked=true]{border-color:var(--gold2);box-shadow:0 0 0 3px var(--t-focus)}
.pic .tick{border-color:#fff}
.tabs{background:var(--t-soft)}
.tabs button{color:#3a3020}
.preset-text{background:var(--t-soft);color:var(--t-text)}
.meter.green{background:#e3f4e8;color:#14532d}.meter.amber{background:#fff3d6;color:#5c420c}.meter.red{background:var(--t-err-bg);color:var(--t-err)}
.linkbox{background:var(--t-soft);color:#2b1d12}
.ok{background:#e6f4ea;border-color:#2f7d4f;color:#14532d}
.notice{background:#fbf3df;border-color:var(--t-line);color:var(--t-text)}
footer{color:var(--t-muted);border-top-color:var(--t-line)}
.card{box-shadow:0 14px 40px var(--t-shadow)}
.tagpanel{box-shadow:0 8px 20px var(--t-shadow)}
.styles button,.seg button,.looktab{color:#3a3020;border-color:var(--t-field)}
.styles button[aria-checked=true],.seg button[aria-checked=true],.looktab[aria-selected=true]{border-color:var(--t-focus)}
.styles.lookgrid button.look[aria-checked=true]{outline-color:var(--t-focus)}
.styles.lookgrid button.look:focus-visible,.fitstage canvas:focus-visible{outline-color:var(--t-focus)}
.seg button[disabled]{opacity:1;color:#6b6352;border-color:#cfc6b2;border-style:dashed}
/* snow on white: js/fx.js reads this colour for the flakes (soft blue-grey, visible on white and on the cream card) */
canvas.fx{--snow:rgba(112,140,166,.8)}
/* inside the cream card: the answer field and outline buttons get the darker gold border (UI >= 3:1 on cream) */
.cbody input[type=text],.cbody .btn.secondary{border-color:var(--t-field)}
.seg button[aria-checked=true][disabled]{background:#efe3bf;color:#3a3020;border-color:#cfc6b2}