/* ==========================================================================
   Skins. Each one overrides the tokens from styles.css, in light and dark
   ([data-mode="dark"]), plus a few signature touches. "Studio" is the default
   and lives in styles.css itself. Swatches for the picker are in js/app.js (SKINS).
   ========================================================================== */

/* ---------- Minimal: sleek, modern, quiet ---------- */
:root[data-skin="minimal"] {
  --bg: #fafafa; --surface: #ffffff; --surface-2: #f4f4f5; --surface-3: #ebebed;
  --ink: #0a0a0b; --ink-2: #3f3f46; --muted: #8a8a93; --line: #ececee; --line-strong: #dcdce0;
  --accent: #111113; --accent-ink: #ffffff; --accent-soft: #eeeef0; --danger: #d92d20;
  --shadow: 0 1px 2px rgb(0 0 0 / .04); --shadow-lg: 0 16px 48px rgb(0 0 0 / .12), 0 2px 6px rgb(0 0 0 / .05);
  --s-idea: #b4b4bb; --s-outlined: #4f7cff; --s-drafting: #f5a524; --s-revising: #9b6cff; --s-done: #17b26a;
  --t-part: #111113; --t-chapter: #52525b; --t-section: #a1a1aa;
  --ui: 'Geist', 'Inter', system-ui, sans-serif;
  --serif: 'Geist', 'Inter', system-ui, sans-serif;
  --display: 'Geist', 'Inter', system-ui, sans-serif;
  --display-w: 600;
  --prose-scale: .95; --prose-leading: 1.8; --prose-width: 740px;
  --radius: 12px; --radius-sm: 8px;
  --glow: #ffffff; --binder-bg: var(--bg); --topbar-bg: color-mix(in srgb, var(--bg) 85%, transparent);
  --note-mix: 30%;
}
:root[data-skin="minimal"][data-mode="dark"] {
  --bg: #09090b; --surface: #111114; --surface-2: #18181b; --surface-3: #232328;
  --ink: #f4f4f5; --ink-2: #c4c4cc; --muted: #71717a; --line: #1f1f23; --line-strong: #2e2e34;
  --accent: #fafafa; --accent-ink: #09090b; --accent-soft: #1f1f23; --danger: #f97066;
  --shadow: 0 1px 2px rgb(0 0 0 / .5); --shadow-lg: 0 16px 48px rgb(0 0 0 / .6), 0 0 0 1px #232328;
  --s-idea: #63636b; --t-part: #fafafa; --t-chapter: #a1a1aa; --t-section: #63636b;
  --glow: #18181b; --note-mix: 18%;
}
[data-skin="minimal"] .topbar { backdrop-filter: saturate(1.4) blur(12px); }
[data-skin="minimal"] .binder .row.selected { box-shadow: none; background: var(--surface-2); }
[data-skin="minimal"] .binder .row:hover { background: var(--surface-2); }
[data-skin="minimal"] .type-badge { background: none !important; color: var(--muted); border: 1px solid var(--line-strong); }
[data-skin="minimal"] .title-input, [data-skin="minimal"] .welcome h1 { letter-spacing: -.035em; }
[data-skin="minimal"] .welcome h1 { font-size: 52px; }
[data-skin="minimal"] .lede { font-size: 17px; }
[data-skin="minimal"] .direction, [data-skin="minimal"] .contains-list, [data-skin="minimal"] .stat,
[data-skin="minimal"] .part-card, [data-skin="minimal"] .card, [data-skin="minimal"] .outline-grid { box-shadow: none; }
[data-skin="minimal"] .card { background-image: none; border-top-width: 1px; border-top-color: var(--line); }
[data-skin="minimal"] .card::before { content: ''; position: absolute; left: 12px; right: 12px; top: -1px; height: 2px; border-radius: 0 0 2px 2px; background: var(--s); }
[data-skin="minimal"] .part-card { border-left-width: 1px; }
[data-skin="minimal"] .toolbar { border-bottom-color: transparent; }
[data-skin="minimal"] .prose blockquote { border-left-width: 2px; font-style: normal; }
[data-skin="minimal"] .stat-num, [data-skin="minimal"] .tb-count, [data-skin="minimal"] .status .total { font-feature-settings: "tnum", "ss01"; }

/* ---------- Typewriter: inked paper, ribbon red ---------- */
:root[data-skin="typewriter"] {
  --bg: #e6dfcd; --surface: #f7f2e4; --surface-2: #ede6d3; --surface-3: #e2d9c2;
  --ink: #211f1b; --ink-2: #48433a; --muted: #857b69; --line: #d7ccb3; --line-strong: #b7aa8c;
  --accent: #b0302a; --accent-ink: #fbf5e8; --accent-soft: #efd7cf; --danger: #b0302a;
  --shadow: 0 1px 0 rgb(60 45 20 / .10), 0 3px 10px rgb(60 45 20 / .08);
  --shadow-lg: 0 14px 40px rgb(50 35 15 / .22);
  --s-idea: #9d9483; --s-outlined: #3f5f86; --s-drafting: #bf8a1e; --s-revising: #6f4f8f; --s-done: #3f7348;
  --t-part: #211f1b; --t-chapter: #b0302a; --t-section: #6f6656;
  --ui: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  --serif: 'Courier Prime', 'Courier New', ui-monospace, monospace;
  --display: 'Special Elite', 'Courier Prime', monospace;
  --display-w: 400;
  --ui-size: 13px;
  --prose-scale: .9; --prose-leading: 1.85; --prose-width: 800px;
  --radius: 3px; --radius-sm: 2px;
  --texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .32 0 0 0 0 .25 0 0 0 0 .14 0 0 0 .13 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --glow: transparent; --binder-bg: transparent; --topbar-bg: var(--surface);
  --note-mix: 34%;
}
:root[data-skin="typewriter"][data-mode="dark"] {
  --bg: #1d1c1a; --surface: #272522; --surface-2: #2f2d29; --surface-3: #3a3732;
  --ink: #ebe4d3; --ink-2: #c4bba7; --muted: #8d8574; --line: #3a3731; --line-strong: #56514a;
  --accent: #e55a4e; --accent-ink: #1d1c1a; --accent-soft: #45251f; --danger: #f07b70;
  --shadow: 0 1px 0 rgb(0 0 0 / .4), 0 3px 10px rgb(0 0 0 / .3); --shadow-lg: 0 14px 40px rgb(0 0 0 / .55);
  --t-part: #ebe4d3; --t-chapter: #e55a4e; --t-section: #9c937f; --s-idea: #807866;
  --texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .95 0 0 0 0 .85 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --note-mix: 20%;
}
/* the draft sits on a sheet of paper, with a margin rule */
[data-skin="typewriter"] .write {
  background: var(--texture), var(--surface); box-shadow: var(--shadow-lg), 0 0 0 1px var(--line);
  margin: 28px auto 60px; padding: 40px clamp(20px, 6vw, 72px) 64px; position: relative;
}
[data-skin="typewriter"] .write::before { content: ''; position: absolute; top: 0; bottom: 0; left: clamp(10px, 3vw, 40px); border-left: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); }
[data-skin="typewriter"] .prose { text-shadow: 0 0 .6px color-mix(in srgb, var(--ink) 55%, transparent); }
[data-skin="typewriter"] .direction, [data-skin="typewriter"] .contains-list, [data-skin="typewriter"] .neighbor { background: var(--bg); }
[data-skin="typewriter"] .field textarea { background: var(--surface); }
[data-skin="typewriter"] .toolbar { background: color-mix(in srgb, var(--surface) 94%, transparent); }
[data-skin="typewriter"] .btn { border: 1.5px solid var(--ink); background: var(--surface); }
[data-skin="typewriter"] .btn.primary { background: var(--accent); border-color: var(--ink); color: var(--accent-ink); box-shadow: 2px 2px 0 var(--ink); }
[data-skin="typewriter"] .btn.primary:active { transform: translate(2px, 2px); box-shadow: none; }
[data-skin="typewriter"] .btn.ghost { border-color: transparent; background: transparent; }
[data-skin="typewriter"] .tabs { background: transparent; border: 1.5px solid var(--ink); border-radius: 2px; padding: 2px; }
[data-skin="typewriter"] .tab.active { background: var(--ink); color: var(--surface); box-shadow: none; }
[data-skin="typewriter"] .row.selected { box-shadow: none; background: var(--surface); outline: 1px solid var(--line-strong); }
[data-skin="typewriter"] .type-badge { border-radius: 0; font-family: var(--display); letter-spacing: .12em; font-weight: 400; }
[data-skin="typewriter"] .card { border-top-width: 3px; background-position: 0 58px; }
[data-skin="typewriter"] .welcome h1 { font-size: 50px; letter-spacing: .02em; }
[data-skin="typewriter"] .welcome h1::after { content: '_'; color: var(--accent); animation: tw-blink 1.1s steps(1) infinite; }
[data-skin="typewriter"] .lede { font-size: 16px; }
@keyframes tw-blink { 50% { opacity: 0; } }

/* ---------- Nocturne: 2am, candlelit ---------- */
:root[data-skin="nocturne"] {
  --bg: #0d1019; --surface: #141925; --surface-2: #1a2030; --surface-3: #232a3d;
  --ink: #ebe4d6; --ink-2: #bdb4a3; --muted: #7c8398; --line: #212839; --line-strong: #30394f;
  --accent: #e8ae5b; --accent-ink: #1b1204; --accent-soft: #3a2d1a; --danger: #f08a7e;
  --shadow: 0 1px 2px rgb(0 0 0 / .4), 0 6px 20px rgb(0 0 0 / .3); --shadow-lg: 0 20px 60px rgb(0 0 0 / .6);
  --s-idea: #6d7386; --s-outlined: #7ea2d8; --s-drafting: #e8ae5b; --s-revising: #b597e6; --s-done: #7fbf8e;
  --t-part: #8fa9c9; --t-chapter: #e8ae5b; --t-section: #8a8fa0;
  --serif: 'EB Garamond', Garamond, 'Iowan Old Style', serif;
  --display: 'Cormorant Garamond', 'EB Garamond', Garamond, serif;
  --display-w: 600;
  --prose-scale: 1.1; --prose-leading: 1.7; --prose-width: 760px;
  --radius: 12px; --radius-sm: 8px;
  --texture: radial-gradient(1400px 900px at 50% 120%, rgb(232 174 91 / .07), transparent 60%);
  --glow: rgb(232 174 91 / .16); --binder-bg: #0b0e16; --topbar-bg: #0b0e16;
  --note-mix: 18%;
  color-scheme: dark;
}
[data-skin="nocturne"] .welcome h1 { font-size: 58px; font-weight: 500; letter-spacing: .01em; }
[data-skin="nocturne"] .lede { font-size: 20px; }
[data-skin="nocturne"] .title-input { font-size: 36px !important; font-weight: 500 !important; }
[data-skin="nocturne"] .editor.prose > p:first-child { text-indent: 0; }
[data-skin="nocturne"] .editor.prose > p:first-child::first-letter { font-family: var(--display); font-size: 3.2em; float: left; line-height: .9; margin: .06em .08em 0 0; color: var(--accent); }
[data-skin="nocturne"] .card { background-image: none; }
[data-skin="nocturne"] .btn.primary { box-shadow: 0 0 24px rgb(232 174 91 / .25); }
[data-skin="nocturne"] .logo-blocks i { box-shadow: 0 0 18px rgb(232 174 91 / .25); }

/* ---------- Meadow: soft, cosy, a little dreamy ---------- */
:root[data-skin="meadow"] {
  --bg: #f4f2e8; --surface: #fffdf7; --surface-2: #ecebdd; --surface-3: #e2e2cf;
  --ink: #2c3327; --ink-2: #4f5846; --muted: #858c78; --line: #e3e1d0; --line-strong: #cdcdb4;
  --accent: #c25e68; --accent-ink: #fffaf8; --accent-soft: #f6dfe0; --danger: #b3261e;
  --shadow: 0 1px 2px rgb(60 70 40 / .05), 0 6px 18px rgb(60 70 40 / .07); --shadow-lg: 0 18px 50px rgb(40 50 25 / .18);
  --s-idea: #a8ab98; --s-outlined: #6d93b8; --s-drafting: #dfa843; --s-revising: #a784c9; --s-done: #5f9a64;
  --t-part: #5d7c55; --t-chapter: #c25e68; --t-section: #8e9180;
  --ui: 'Nunito Sans', 'Inter', system-ui, sans-serif;
  --serif: 'Lora', Georgia, serif;
  --display: 'Fraunces', 'Lora', Georgia, serif;
  --display-w: 500;
  --prose-scale: 1; --prose-leading: 1.8;
  --radius: 18px; --radius-sm: 12px;
  --texture: radial-gradient(900px 500px at 100% 0%, rgb(194 94 104 / .07), transparent 60%), radial-gradient(900px 600px at 0% 100%, rgb(93 124 85 / .09), transparent 60%);
  --glow: #f6dfe0; --binder-bg: #eeeddf;
  --note-mix: 36%;
}
:root[data-skin="meadow"][data-mode="dark"] {
  --bg: #161a15; --surface: #1d221c; --surface-2: #242a22; --surface-3: #2e352b;
  --ink: #e8ebdc; --ink-2: #c1c6b1; --muted: #8b927f; --line: #2d332a; --line-strong: #414a3c;
  --accent: #e8909a; --accent-ink: #1e1214; --accent-soft: #3e2629; --danger: #f2887f;
  --shadow: 0 1px 2px rgb(0 0 0 / .3), 0 6px 18px rgb(0 0 0 / .25); --shadow-lg: 0 18px 50px rgb(0 0 0 / .5);
  --s-idea: #7a7f6d; --t-part: #93b58a; --t-chapter: #e8909a; --t-section: #9aa08b;
  --texture: radial-gradient(900px 500px at 100% 0%, rgb(232 144 154 / .06), transparent 60%), radial-gradient(900px 600px at 0% 100%, rgb(147 181 138 / .07), transparent 60%);
  --glow: #3e2629; --binder-bg: #131712; --note-mix: 20%;
}
[data-skin="meadow"] .btn, [data-skin="meadow"] .tabs, [data-skin="meadow"] .tab, [data-skin="meadow"] .seg-control, [data-skin="meadow"] .seg-control button { border-radius: 999px; }
[data-skin="meadow"] .welcome h1, [data-skin="meadow"] .title-input { font-variation-settings: "SOFT" 100, "WONK" 1; }
[data-skin="meadow"] .welcome h1 { font-size: 50px; font-style: italic; }
[data-skin="meadow"] .logo-blocks i { border-radius: 50%; }
[data-skin="meadow"] .card { background-image: none; }
[data-skin="meadow"] .note { border-radius: 14px; }
[data-skin="meadow"] .prose hr::after { content: '❦'; letter-spacing: 0; font-size: 1.1em; color: var(--t-part); }