/* Rooted News looks. Each skin redefines the tokens in app.css. The default (no data-skin) follows the system theme. */

/* 2. Newsprint: warm paper, serif display, hairlines, red accent */
html[data-skin="newsprint"]{color-scheme:light;
  --bg:#f7f4ee;--bg2:#efeadf;--bg3:#e5dfd1;--fg:#1b1a17;--muted:#5d584f;--faint:#8a8477;--line:#d9d3c5;--line2:#bfb7a6;
  --accent:#b3261e;--accent-soft:#f4e1de;--accent-ink:#ffffff;--warn:#8a5a00;--ts:55%;--tl:34%;--tbg:.12;
  --display:"Fraunces","Georgia",serif;--body:"Source Serif 4","Georgia",serif;--mono:"Courier Prime","Courier New",monospace;--r:2px;--r2:3px;--shadow:none}
html[data-skin="newsprint"] .title,html[data-skin="newsprint"] .story h3{font-weight:700;letter-spacing:-.01em}
html[data-skin="newsprint"] .brand{font-weight:800}
html[data-skin="newsprint"] .chip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff}

/* 3. Midnight: deep navy, mint accent, soft corners */
html[data-skin="midnight"]{color-scheme:dark;
  --bg:#0b1020;--bg2:#121a31;--bg3:#1a2442;--fg:#e6ebff;--muted:#9aa6c8;--faint:#6b779b;--line:#1f2a49;--line2:#2f3c62;
  --accent:#4ade80;--accent-soft:#143324;--accent-ink:#06130c;--warn:#fbbf24;--ts:72%;--tl:70%;--tbg:.18;--ov:rgba(5,8,20,.65);
  --display:"Instrument Sans","Helvetica Neue",Arial,sans-serif;--body:"Instrument Sans","Helvetica Neue",Arial,sans-serif;--mono:"JetBrains Mono",ui-monospace,monospace;--r:10px;--r2:14px;--shadow:0 1px 2px rgba(0,0,0,.4),0 10px 30px rgba(0,0,0,.45)}
html[data-skin="midnight"] .title,html[data-skin="midnight"] .story h3,html[data-skin="midnight"] h2{letter-spacing:-.03em;font-weight:700}

/* 4. Paper: pure white, charcoal, teal accent, square */
html[data-skin="paper"]{color-scheme:light;
  --bg:#ffffff;--bg2:#f5f5f5;--bg3:#ebebeb;--fg:#222222;--muted:#666666;--faint:#9a9a9a;--line:#e3e3e3;--line2:#c8c8c8;
  --accent:#005f73;--accent-soft:#e0eff2;--accent-ink:#ffffff;--warn:#9a3412;--ts:60%;--tl:36%;--tbg:.10;
  --display:"Libre Franklin","Helvetica Neue",Arial,sans-serif;--body:"Libre Franklin","Helvetica Neue",Arial,sans-serif;--mono:"IBM Plex Mono",ui-monospace,monospace;--r:0px;--r2:0px;--shadow:none}
html[data-skin="paper"] .title,html[data-skin="paper"] .story h3,html[data-skin="paper"] h2{font-weight:800;letter-spacing:-.02em}
html[data-skin="paper"] .logo,html[data-skin="paper"] .media,html[data-skin="paper"] .panel,html[data-skin="paper"] .ocard,html[data-skin="paper"] .tile,html[data-skin="paper"] .chip,html[data-skin="paper"] .follow,html[data-skin="paper"] .post-btn,html[data-skin="paper"] .nav,html[data-skin="paper"] .search{border-radius:0}

/* 5. Terminal: black, amber, monospace everywhere */
html[data-skin="terminal"]{color-scheme:dark;
  --bg:#0a0a0a;--bg2:#121212;--bg3:#1c1c1c;--fg:#d8d8d8;--muted:#8f8f8f;--faint:#5e5e5e;--line:#262626;--line2:#3a3a3a;
  --accent:#ffb000;--accent-soft:#2a2000;--accent-ink:#0a0a0a;--warn:#ff6b35;--ts:70%;--tl:66%;--tbg:.16;--ov:rgba(0,0,0,.7);
  --display:"JetBrains Mono",ui-monospace,monospace;--body:"JetBrains Mono",ui-monospace,monospace;--mono:"JetBrains Mono",ui-monospace,monospace;--r:0px;--r2:0px;--shadow:none}
html[data-skin="terminal"] body{font-size:14px}
html[data-skin="terminal"] .title{font-size:16px;font-weight:700}
html[data-skin="terminal"] .story h3{font-size:19px}
html[data-skin="terminal"] .logo,html[data-skin="terminal"] .media,html[data-skin="terminal"] .panel,html[data-skin="terminal"] .ocard,html[data-skin="terminal"] .tile,html[data-skin="terminal"] .chip,html[data-skin="terminal"] .follow,html[data-skin="terminal"] .post-btn,html[data-skin="terminal"] .nav,html[data-skin="terminal"] .search,html[data-skin="terminal"] .act{border-radius:0}
html[data-skin="terminal"] .kick{text-transform:uppercase}
html[data-skin="terminal"] .media img{filter:saturate(.8) contrast(1.05)}

/* 6. Forest: deep green, moss cards, lime accent, serif display */
html[data-skin="forest"]{color-scheme:dark;
  --bg:#0f1f17;--bg2:#16291f;--bg3:#1e3528;--fg:#e9f1ea;--muted:#a4b8a9;--faint:#718a78;--line:#22382c;--line2:#345042;
  --accent:#9ad46b;--accent-soft:#1f3a1f;--accent-ink:#0b1a0d;--warn:#f0c060;--ts:62%;--tl:70%;--tbg:.18;--ov:rgba(5,15,9,.65);
  --display:"Fraunces","Georgia",serif;--body:"Public Sans","Helvetica Neue",Arial,sans-serif;--mono:"IBM Plex Mono",ui-monospace,monospace;--r:12px;--r2:16px;--shadow:0 1px 2px rgba(0,0,0,.35),0 10px 28px rgba(0,0,0,.35)}
html[data-skin="forest"] .title,html[data-skin="forest"] .story h3,html[data-skin="forest"] h2{font-weight:600;letter-spacing:-.01em}

/* 7. Wire: black on white, thick rules, yellow highlight */
html[data-skin="wire"]{color-scheme:light;
  --bg:#ffffff;--bg2:#f2f2f2;--bg3:#e6e6e6;--fg:#000000;--muted:#444444;--faint:#777777;--line:#000000;--line2:#000000;
  --accent:#111111;--accent-soft:#fff3a3;--accent-ink:#ffd600;--warn:#b00020;--ts:80%;--tl:30%;--tbg:.14;
  --display:"Archivo Black","Impact","Helvetica Neue",Arial,sans-serif;--body:"Archivo","Helvetica Neue",Arial,sans-serif;--mono:"Space Mono",ui-monospace,monospace;--r:0px;--r2:0px;--shadow:none}
html[data-skin="wire"] .card,html[data-skin="wire"] .story,html[data-skin="wire"] .feed-head,html[data-skin="wire"] .top,html[data-skin="wire"] .profile{border-width:2px}
html[data-skin="wire"] main{border-left-width:2px;border-right-width:2px}
html[data-skin="wire"] .act[aria-pressed="true"],html[data-skin="wire"] .tpc,html[data-skin="wire"] .more,html[data-skin="wire"] .panel .all{color:#000;background:var(--accent-soft)}
html[data-skin="wire"] .post-btn,html[data-skin="wire"] .primary,html[data-skin="wire"] .tfollow[aria-pressed="true"]{background:#ffd600;color:#000;border:2px solid #000}
html[data-skin="wire"] .logo,html[data-skin="wire"] .media,html[data-skin="wire"] .panel,html[data-skin="wire"] .ocard,html[data-skin="wire"] .tile,html[data-skin="wire"] .chip,html[data-skin="wire"] .follow,html[data-skin="wire"] .post-btn,html[data-skin="wire"] .nav,html[data-skin="wire"] .search,html[data-skin="wire"] .act,html[data-skin="wire"] .primary{border-radius:0}
html[data-skin="wire"] .media,html[data-skin="wire"] .panel,html[data-skin="wire"] .ocard,html[data-skin="wire"] .chip,html[data-skin="wire"] .search{border:2px solid #000}
html[data-skin="wire"] .title{font-weight:400;font-size:19px;line-height:1.2}
html[data-skin="wire"] .story h3{font-weight:400;font-size:26px}
html[data-skin="wire"] .nav[aria-current="page"]{background:#ffd600}

/* 8. Tabloid: white, red, condensed uppercase headlines */
html[data-skin="tabloid"]{color-scheme:light;
  --bg:#ffffff;--bg2:#f4f4f4;--bg3:#e8e8e8;--fg:#111111;--muted:#555555;--faint:#8c8c8c;--line:#dcdcdc;--line2:#bdbdbd;
  --accent:#d00000;--accent-soft:#fde3e3;--accent-ink:#ffffff;--warn:#1d4ed8;--ts:75%;--tl:38%;--tbg:.12;
  --display:"Anton","Impact","Arial Narrow",sans-serif;--body:"Barlow","Helvetica Neue",Arial,sans-serif;--mono:"Barlow Condensed","Arial Narrow",sans-serif;--r:4px;--r2:6px;--shadow:0 1px 2px rgba(0,0,0,.08)}
html[data-skin="tabloid"] body{font-size:16px}
html[data-skin="tabloid"] .title{font-weight:400;font-size:22px;line-height:1.08;text-transform:uppercase;letter-spacing:.005em}
html[data-skin="tabloid"] .story h3{font-weight:400;font-size:34px;line-height:1.02;text-transform:uppercase}
html[data-skin="tabloid"] h2,html[data-skin="tabloid"] .brand,html[data-skin="tabloid"] .tile b,html[data-skin="tabloid"] .ocard .b b{font-weight:400;text-transform:uppercase;letter-spacing:.01em}
html[data-skin="tabloid"] .mono,html[data-skin="tabloid"] .kick,html[data-skin="tabloid"] .pill{font-size:13px;letter-spacing:.04em}
html[data-skin="tabloid"] .kick{background:var(--accent);color:#fff!important}
html[data-skin="tabloid"] .kick .dot{background:#fff}

/* picker */
.lookbtn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line2);border-radius:999px;padding:6px 12px;font-size:13px;font-weight:600;white-space:nowrap;background:var(--bg2)}
.lookbtn svg{width:16px;height:16px}
.lookpanel{position:fixed;z-index:50;top:calc(62px + env(safe-area-inset-top,0px));right:max(16px,env(safe-area-inset-right,0px));width:min(420px,calc(100vw - 32px));background:var(--bg);border:1px solid var(--line2);border-radius:var(--r2);box-shadow:var(--shadow),0 20px 60px rgba(0,0,0,.25);padding:12px}
.lookpanel h3{font-size:15px;font-weight:800;margin:0 0 8px;display:flex;align-items:center}
.lookpanel .x{margin-left:auto;font-size:13px;color:var(--muted)}
.looks{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.look{border:2px solid transparent;border-radius:10px;padding:0;overflow:hidden;text-align:left;background:var(--bg2)}
.look[aria-pressed="true"]{border-color:var(--accent)}
.look .sw{height:54px;position:relative;display:flex;align-items:flex-end;padding:6px 8px;gap:4px}
.look .sw i{display:block;height:6px;flex:1;border-radius:2px}
.look .sw b{position:absolute;top:6px;left:8px;font-size:15px;line-height:1}
.look .nm{display:block;padding:6px 8px 7px;font-size:12px;font-weight:700}
.look .nm small{display:block;font-weight:400;color:var(--muted);font-size:11px;margin-top:1px}
@media (max-width:760px){.looks{grid-template-columns:repeat(3,1fr)}.lookbtn span{display:none}.lookbtn{padding:6px 9px}}
.marks{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.markbtn{border:2px solid transparent;border-radius:10px;padding:8px 4px 6px;background:var(--bg2);display:flex;flex-direction:column;align-items:center;gap:4px}
.markbtn[aria-pressed="true"]{border-color:var(--accent)}
.markbtn .mk{width:40px;height:40px;border-radius:11px;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center}
.markbtn .mk svg{width:30px;height:30px}
.markbtn small{font-size:11px;font-weight:600;color:var(--muted)}

/* Light and Dark from the Look panel apply to every look: neutrals switch, each look keeps its accent and type */
html[data-theme="dark"][data-skin]{color-scheme:dark;--bg:#0f1113;--bg2:#171a1e;--bg3:#20252b;--fg:#ebedef;--muted:#9aa3ad;--faint:#6b747e;--line:#262b31;--line2:#394149;--ts:70%;--tl:68%;--tbg:.16;--ov:rgba(0,0,0,.62);--shadow:0 1px 2px rgba(0,0,0,.35),0 8px 24px rgba(0,0,0,.4)}
html[data-theme="light"][data-skin]{color-scheme:light;--bg:#ffffff;--bg2:#f4f5f6;--bg3:#e9ebee;--fg:#141618;--muted:#636b73;--faint:#8e969e;--line:#e2e5e8;--line2:#c9ced4;--ts:62%;--tl:34%;--tbg:.10;--ov:rgba(0,0,0,.55);--shadow:0 1px 2px rgba(0,0,0,.05),0 8px 24px rgba(0,0,0,.06)}
html[data-theme="dark"][data-skin="wire"]{--accent:#ffd600;--accent-soft:#3a3300;--accent-ink:#111111;--line:#ffffff;--line2:#ffffff}
html[data-theme="dark"][data-skin="newsprint"]{--bg:#1c1a16;--bg2:#24211c;--bg3:#2e2a24;--fg:#efe9dc;--line:#3a352c;--line2:#4e473b}
html[data-theme="light"][data-skin="terminal"]{--accent:#8a5a00;--accent-soft:#fff1cc;--accent-ink:#ffffff}
html[data-theme="light"][data-skin="midnight"]{--accent:#0d8a4e;--accent-soft:#e3f4ea;--accent-ink:#ffffff}
html[data-theme="light"][data-skin="forest"]{--accent:#2f7a33;--accent-soft:#e2f2e3;--accent-ink:#ffffff}