/* Shared design tokens for index.html (landing) and app.html (studio).
   Loaded before each page's own <style>, so a page can override a token
   inline (app.html tightens --radius to 18px and adds --side-w). */
:root{
  --bg:#ffffff;
  --bg-soft:#f5f5f7;          /* Apple section gray */
  --panel:#ffffff;
  --panel-soft:#fbfbfd;
  --line:#d2d2d7;             /* Apple hairline */
  --line-soft:#e8e8ed;
  --text:#1d1d1f;
  --dim:#6e6e73;
  --dim2:#86868b;
  --ink:#1d1d1f;             /* primary action */
  --ink-hover:#000000;
  --on-ink:#ffffff;          /* text/glyph on top of --ink */
  --dropzone-hover:#f0f0f3;
  --thumb-bg:#f0f0f3;
  --green:#34c759;           /* iOS system green accent */
  --green-ink:#1a8a44;       /* accessible green text on white */
  --amber:#b25e00;
  --danger:#d70015;
  --radius:20px;
  --radius-sm:12px;
  --shadow-sm:0 1px 2px rgba(0,0,0,.04), 0 1px 3px rgba(0,0,0,.05);
  --shadow-md:0 6px 24px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.04);
  --shadow-lg:0 24px 60px rgba(0,0,0,.10), 0 4px 12px rgba(0,0,0,.05);
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Inter",system-ui,"Helvetica Neue",Arial,sans-serif;
  --ease:cubic-bezier(.4,0,.2,1);
}
/* The theme-boot script stamps data-theme from the saved choice or the OS
   preference, so this selector covers both "OS is dark" and "user toggled
   dark", and a user-chosen light theme cleanly overrides a dark OS. */
:root[data-theme="dark"]{
  --bg:#000000;
  --bg-soft:#161617;         /* Apple dark section */
  --panel:#1d1d1f;
  --panel-soft:#161617;
  --line:#38383a;
  --line-soft:#2c2c2e;
  --text:#f5f5f7;
  --dim:#a1a1a6;
  --dim2:#8a8a8e;
  --ink:#f5f5f7;             /* primary action goes light on dark */
  --ink-hover:#ffffff;
  --on-ink:#1d1d1f;          /* dark glyph on the light button */
  --green:#30d158;           /* iOS dark-mode green */
  --green-ink:#41d669;       /* readable green text on dark */
  --dropzone-hover:#242426;
  --thumb-bg:#2c2c2e;
  --shadow-sm:0 1px 2px rgba(0,0,0,.5);
  --shadow-md:0 8px 28px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.5);
  --shadow-lg:0 24px 60px rgba(0,0,0,.7), 0 4px 12px rgba(0,0,0,.5);
}

/* ---- Custom gradient editor (SO-25), shared by index.html + app.html ---- */
.custombg{margin-top:12px;padding:12px;border:1px solid var(--line-soft);border-radius:12px;background:var(--bg-soft);display:flex;flex-direction:column;gap:10px}
.custombg .cb-preview{height:44px;border-radius:9px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.custombg .cb-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.custombg .cb-seg{display:inline-flex;border:1px solid var(--line);border-radius:9px;overflow:hidden}
.custombg .cb-seg button{border:0;background:transparent;color:var(--dim);font:inherit;font-size:12px;font-weight:600;padding:5px 11px;cursor:pointer}
.custombg .cb-seg button.on{background:var(--ink);color:var(--on-ink)}
.custombg .cb-lbl{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:var(--dim)}
.custombg .cb-lbl.cb-off{opacity:.4;pointer-events:none}
.custombg input[type=range]{accent-color:var(--green);width:110px}
.custombg .cb-val{font-size:11.5px;color:var(--dim2);min-width:34px}
.custombg .cb-stops{gap:7px}
.custombg .cb-stop{position:relative;display:inline-flex}
.custombg input[type=color]{width:34px;height:34px;border:1px solid var(--line);border-radius:9px;padding:2px;background:var(--panel);cursor:pointer}
.custombg .cb-del{position:absolute;top:-6px;right:-6px;width:16px;height:16px;border-radius:50%;border:0;background:var(--dim2);color:#fff;font-size:11px;line-height:1;cursor:pointer;display:none;align-items:center;justify-content:center;padding:0}
.custombg .cb-stop:hover .cb-del{display:inline-flex}
.custombg .cb-add{width:34px;height:34px;border-radius:9px;border:1.5px dashed var(--line);background:transparent;color:var(--dim);font-size:16px;cursor:pointer}
.custombg .cb-add:hover{border-color:var(--dim2);color:var(--text)}
.custombg select{border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--text);font:inherit;font-size:12px;padding:5px 8px}