/* Brain's themes, shared by the desktop app (app/index.html) and the phone app (mobile/index.html).
   A theme is a family (the look) plus a mode (its light/dark variant); app/theme.js picks one and sets
   data-theme="<family>-<mode>", data-family and data-tone on <html>.
   The system: every theme sets the same tokens below, and the pages only ever read tokens.
     colour  --bg --tile --tile-2 --tile-3 --line --ink --muted --dim
             --accent --accent-ink --good --good-ink --bad --info --extra
     cover   --cover (may be a gradient) --cover-solid --cover-ink
     type    --sans --display --mono
     shape   --tile-shadow (borders and corners: family rules at the bottom)
     texture --grain --bg-image
   Selectors are [data-theme] (not html[...]) so the pickers can preview a theme on any element. */

:root {
  --sans: "Schibsted Grotesk", -apple-system, "SF Pro Text", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --display: "Bodoni Moda", "Bodoni 72", Didot, Georgia, serif;
  --grain-dark: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .05 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  --grain-light: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .07 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  /* Spring easing: overshoots ~16% then settles. Used for presses, pops and toasts (not the drawer, which would gap at the edge). */
  --spring: linear(0, 0.399, 0.775, 1.028, 1.145, 1.161, 1.121, 1.066, 1.019, 0.99, 0.979, 0.979, 0.986, 0.993, 0.999, 1.002, 1.003, 1.003, 1.002, 1.001, 1);
}

/* Defaults every theme starts from; each theme below overrides what it needs. */
:root, [data-theme] {
  --cover: var(--accent); --cover-solid: var(--accent); --cover-ink: var(--accent-ink);
  --good-ink: var(--accent-ink); --tile-shadow: none; --bg-image: none; --scrim: rgba(0,0,0,.55); --shade: #000;
}
[data-tone="dark"] { color-scheme: dark; --grain: var(--grain-dark); }
[data-tone="light"] { color-scheme: light; --grain: var(--grain-light); --scrim: rgba(30,35,45,.25); }

/* ---------- Classic: each mode has its own accent ---------- */
:root, [data-theme="classic-dark"] {
  --bg: #0c0d0f; --tile: #15171a; --tile-2: #1c1f23; --tile-3: #24282d; --line: #262a2f; --ink: #eceae4; --muted: #9a9ea4; --dim: #6a6f75;
  --accent: #ffb547; --accent-ink: #1a1204; --good: #7ee0b0; --good-ink: #06140d; --bad: #ff8a7a; --info: #8cc4ff; --extra: #c3a6ff;
}
[data-theme="classic-softdark"] {
  --bg: #1f2023; --tile: #27292d; --tile-2: #2e3035; --tile-3: #36393e; --line: #383b40; --ink: #dcdad4; --muted: #9a9893; --dim: #706e6a;
  --accent: #d9a85e; --accent-ink: #1f1a12; --good: #8cc9a6; --good-ink: #0d1a12; --bad: #df988d; --info: #98b6d8; --extra: #b9a6dc;
  --grain: none;
}
[data-theme="classic-light"] {
  --bg: #e6e8eb; --tile: rgba(250,251,252,.74); --tile-2: rgba(255,255,255,.62); --tile-3: rgba(20,24,30,.07); --line: rgba(20,24,30,.08);
  --ink: #15181d; --muted: #565c66; --dim: #8a909a; --accent: #3d5a80; --accent-ink: #ffffff;
  --good: #2f855a; --good-ink: #ffffff; --bad: #c0392b; --info: #2f6db5; --extra: #6b4fbb;
  --bg-image: radial-gradient(1200px 700px at 15% -10%, #f7f8f9, transparent 60%), linear-gradient(180deg, #eceef0, #dfe2e6);
  --cover: linear-gradient(160deg, #46648c, #2f4866); --cover-solid: #2f4866; --cover-ink: #f4f7fb;
  --tile-shadow: 0 1px 2px rgba(20,30,45,.05), 0 10px 28px rgba(20,30,45,.06);
}
[data-theme="classic-softlight"] {
  --bg: #e9e9ea; --tile: #fafafa; --tile-2: #f2f2f3; --tile-3: #e6e6e8; --line: #e3e3e5;
  --ink: #1d1d1f; --muted: #6e6e73; --dim: #a1a1a6; --accent: #1d1d1f; --accent-ink: #ffffff;
  --good: #2fb344; --good-ink: #ffffff; --bad: #e5484d; --info: #3b82f6; --extra: #7c5cff;
  --grain: none; --tile-shadow: 0 1px 2px rgba(0,0,0,.04), 0 2px 8px rgba(0,0,0,.03);
}
/* Classic Light is frosted glass. */
[data-theme="classic-light"] .tile, [data-theme="classic-light"] .capture-btn, [data-theme="classic-light"] .chip {
  border-color: rgba(255,255,255,.85); -webkit-backdrop-filter: blur(30px) saturate(140%); backdrop-filter: blur(30px) saturate(140%); }

/* ---------- Brain: orange + green in every mode, like the icon ---------- */
[data-theme="brain-dark"] {
  --bg: #0e0d0c; --tile: #171513; --tile-2: #1f1c19; --tile-3: #29251f; --line: #2a2622; --ink: #efeae3; --muted: #a19a91; --dim: #6f6961;
  --accent: #ff8a3d; --accent-ink: #1a0d03; --good: #5fd38d; --good-ink: #04140a; --bad: #ff7a6b; --info: #8ab8ff; --extra: #c9a6ff;
}
[data-theme="brain-softdark"] {
  --bg: #22201e; --tile: #2a2826; --tile-2: #33302d; --tile-3: #3a3733; --line: #3c3935; --ink: #e2ddd6; --muted: #a39d95; --dim: #78726b;
  --accent: #f0955a; --accent-ink: #22140a; --good: #7cc99a; --good-ink: #0d1a12; --bad: #e8948a; --info: #9bb8de; --extra: #c2a9e6;
  --grain: none;
}
[data-theme="brain-light"] {
  --bg: #f4f2ef; --tile: #ffffff; --tile-2: #f7f5f2; --tile-3: rgba(28,25,21,.06); --line: #e4e0da; --ink: #1c1915; --muted: #625b52; --dim: #958d83;
  --accent: #e2621b; --accent-ink: #ffffff; --good: #1f8a4c; --good-ink: #ffffff; --bad: #c93a2e; --info: #2d6bc0; --extra: #7a4fc0;
  --tile-shadow: 0 1px 2px rgba(60,40,20,.05), 0 8px 24px rgba(60,40,20,.05);
}
[data-theme="brain-softlight"] {
  --bg: #ebe8e4; --tile: #f8f6f3; --tile-2: #f1eeea; --tile-3: #e6e2dc; --line: #e0dcd6; --ink: #2a2621; --muted: #756e65; --dim: #a39b91;
  --accent: #d9773f; --accent-ink: #ffffff; --good: #3f9a62; --good-ink: #ffffff; --bad: #d0574c; --info: #4f7fbf; --extra: #8a68c4;
  --grain: none; --tile-shadow: 0 1px 2px rgba(0,0,0,.04), 0 2px 8px rgba(0,0,0,.03);
}

/* ---------- Phosphor: green-screen terminal (dark only) ---------- */
[data-theme="phosphor-green"] {
  --bg: #050a06; --tile: #0a140c; --tile-2: #0f1f12; --tile-3: #15291a; --line: #1b3a20; --ink: #b8ffc4; --muted: #5fae6c; --dim: #3b7346;
  --accent: #39ff6a; --accent-ink: #031006; --good: #39ff6a; --good-ink: #031006; --bad: #ffb000; --info: #7dffd0; --extra: #b8ff5a;
  --cover: #0f2a14; --cover-solid: #0f2a14; --cover-ink: #39ff6a;
}
[data-theme="phosphor-amber"] {
  --bg: #0a0703; --tile: #140e05; --tile-2: #1f1607; --tile-3: #2a1e0a; --line: #3a2a10; --ink: #ffd9a0; --muted: #c08a3a; --dim: #7a5a26;
  --accent: #ffb000; --accent-ink: #140c00; --good: #ffcf5a; --good-ink: #140c00; --bad: #ff5a36; --info: #ffe08a; --extra: #ffc46b;
  --cover: #2a1d06; --cover-solid: #2a1d06; --cover-ink: #ffb000;
}
[data-family="phosphor"] {
  --sans: "JetBrains Mono", ui-monospace, Menlo, monospace; --display: var(--sans);
  --grain: repeating-linear-gradient(0deg, rgba(0,0,0,.22) 0 1px, transparent 1px 3px);
  --tile-shadow: 0 0 14px color-mix(in srgb, var(--accent) 12%, transparent);
}
[data-family="phosphor"] body { text-shadow: 0 0 6px color-mix(in srgb, var(--ink) 30%, transparent); }

/* ---------- Riso: printed zine, fluoro ink and offset shadows ---------- */
[data-theme="riso-paper"] {
  --bg: #f3eee2; --tile: #fbf8f0; --tile-2: #f6f1e4; --tile-3: #ece5d4; --line: #1c1c1c; --ink: #1c1c1c; --muted: #5b564c; --dim: #8a8478;
  --accent: #ff4f9a; --accent-ink: #ffffff; --good: #0078bf; --good-ink: #ffffff; --bad: #e8432d; --info: #0078bf; --extra: #765ba7;
  --cover: #0078bf; --cover-solid: #0078bf; --cover-ink: #ffffff;
}
[data-theme="riso-ink"] {
  --bg: #141414; --tile: #1d1c1b; --tile-2: #252422; --tile-3: #2e2c29; --line: #f3eee2; --ink: #f3eee2; --muted: #b5ae9f; --dim: #7d776c;
  --accent: #ff4f9a; --accent-ink: #141414; --good: #3fb6ff; --good-ink: #141414; --bad: #ff6b4f; --info: #3fb6ff; --extra: #ffe800;
}
[data-family="riso"] { --display: "Bricolage Grotesque", var(--sans); --tile-shadow: 4px 4px 0 var(--line); }
[data-family="riso"] .tile, [data-family="riso"] .card { border-width: 2px; }
[data-family="riso"] .cover { box-shadow: 5px 5px 0 var(--accent); }

/* ---------- Swiss: white, black rules, square corners ---------- */
[data-theme="swiss-light"] {
  --bg: #ffffff; --tile: #ffffff; --tile-2: #f4f4f4; --tile-3: #ebebeb; --line: #000000; --ink: #000000; --muted: #3d3d3d; --dim: #767676;
  --accent: #1f3fff; --accent-ink: #ffffff; --good: #00a651; --good-ink: #ffffff; --bad: #ff2d00; --info: #1f3fff; --extra: #7b2cff;
  --cover: #ffe600; --cover-solid: #ffe600; --cover-ink: #000000;
}
[data-theme="swiss-dark"] {
  --bg: #000000; --tile: #000000; --tile-2: #111111; --tile-3: #1c1c1c; --line: #ffffff; --ink: #ffffff; --muted: #c2c2c2; --dim: #8a8a8a;
  --accent: #ffe600; --accent-ink: #000000; --good: #00d26a; --good-ink: #000000; --bad: #ff3b1f; --info: #6b84ff; --extra: #b18cff;
  --cover: #1f3fff; --cover-solid: #1f3fff; --cover-ink: #ffffff;
}
[data-family="swiss"] { --sans: "Inter Tight", "Helvetica Neue", Arial, sans-serif; --display: var(--sans); --grain: none; }
[data-family="swiss"] * { border-radius: 0 !important; }
[data-family="swiss"] { --page-r: 0px; --tile-r: 0px; }  /* the page's open/close clip is square too */
[data-family="swiss"] .tile, [data-family="swiss"] .card { border-width: 2px; }
[data-family="swiss"] .cover h3 { text-transform: uppercase; letter-spacing: -.04em; }


/* ---------- Glass: translucent tiles over a blurred backdrop. In the Mac app (html.native) the window
   itself is macOS glass, so the page background goes clear and the desktop shows through. ---------- */
[data-theme="glass-light"] {
  --bg: #d9cfc4; --tile: rgba(255,252,248,.50); --tile-2: rgba(255,252,248,.36); --tile-3: rgba(255,255,255,.18); --line: rgba(255,255,255,.62);
  --ink: #221d18; --muted: #5a5047; --dim: #8a7f74; --accent: #10b981; --accent-ink: #ffffff;
  --good: #059669; --good-ink: #ffffff; --bad: #dc4a3a; --info: #3b82c4; --extra: #8b6cc9;
  --bg-image: radial-gradient(700px 520px at 18% 12%, #f3e9dc, transparent 65%), radial-gradient(800px 600px at 85% 20%, #b9a48e, transparent 60%),
              radial-gradient(900px 600px at 30% 100%, #8f7a64, transparent 60%), linear-gradient(180deg, #e2d8cc, #b8a998);
  --cover: linear-gradient(155deg, rgba(255,255,255,.55), rgba(255,250,244,.18)); --cover-solid: #fffaf4; --cover-ink: #221d18;
  --tile-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 1px 2px rgba(60,40,20,.06), 0 12px 36px rgba(60,40,20,.10);
  --grain: none; --scrim: rgba(40,30,20,.18);
}
[data-theme="glass-dark"] {
  --bg: #17130f; --tile: rgba(255,255,255,.10); --tile-2: rgba(255,255,255,.06); --tile-3: rgba(255,255,255,.10); --line: rgba(255,255,255,.14);
  --ink: #f6f2ec; --muted: #b8afa5; --dim: #7d756c; --accent: #34d399; --accent-ink: #04140a;
  --good: #34d399; --good-ink: #04140a; --bad: #ff7a6b; --info: #7cb8ff; --extra: #c4a6ff;
  --bg-image: radial-gradient(700px 520px at 18% 12%, #4a3b2c, transparent 65%), radial-gradient(800px 600px at 85% 20%, #2c2621, transparent 60%),
              radial-gradient(900px 600px at 30% 100%, #3a2c1f, transparent 60%), linear-gradient(180deg, #1c1813, #0f0c09);
  --cover: linear-gradient(155deg, rgba(255,255,255,.16), rgba(255,255,255,.05)); --cover-solid: #1d1915; --cover-ink: #f6f2ec;
  --tile-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 12px 40px rgba(0,0,0,.40);
  --grain: none;
}
[data-family="glass"] { --sans: -apple-system, "SF Pro Text", system-ui, sans-serif; --display: -apple-system, "SF Pro Display", system-ui, sans-serif;
  --mono: "SF Mono", ui-monospace, Menlo, monospace; }
[data-family="glass"] .tile, [data-family="glass"] .nudge, [data-family="glass"] .capture-btn, [data-family="glass"] .chip,
[data-family="glass"] .sheet, [data-family="glass"] .drawer, [data-family="glass"] .palette, [data-family="glass"] .cover {
  -webkit-backdrop-filter: blur(40px) saturate(160%); backdrop-filter: blur(40px) saturate(160%); }
[data-family="glass"] .tile, [data-family="glass"] .cover { border-radius: 22px; }
[data-family="glass"] .chip, [data-family="glass"] .capture-btn { border-radius: 999px; }
/* In the Mac app the page is clear over the window's blur, with a warm wash so it reads like the frosted-room look. */
html.native[data-theme="glass-light"] { background: rgba(244,234,222,.42); }
html.native[data-theme="glass-dark"] { background: rgba(22,17,12,.42); }
[data-family="glass"] .bar { background: color-mix(in srgb, var(--tile) 55%, transparent); border-bottom: 1px solid var(--line);
  -webkit-backdrop-filter: blur(30px) saturate(170%); backdrop-filter: blur(30px) saturate(170%); }
[data-family="glass"] .bt-spot { background: color-mix(in srgb, #fff 42%, transparent); border-color: rgba(255,255,255,.75);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 4px 14px rgba(60,40,20,.06); }
[data-theme="glass-dark"] .bt-spot { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.14); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
html.native[data-family="glass"] body { background: transparent; }

/* ---------- applied to both pages ---------- */
html { background: var(--grain), var(--bg-image), var(--bg); background-attachment: scroll, fixed, scroll; }
.tile, .nudge, .capture-btn, .chip, .sheet, .drawer, .palette { background-image: var(--grain); }
.tile { box-shadow: var(--tile-shadow); }
.cover { background: var(--grain), var(--cover); }  /* after the grain rule above, so a gradient cover survives */
.scrim { background: var(--scrim); }

[data-family="glass"] .island { background: rgba(28,22,17,.72); color: #fff; -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 6px 20px rgba(40,25,10,.18); }
[data-theme="glass-dark"] .island { background: rgba(255,255,255,.12); }

/* Opened tile pages: heavy frost so the board behind never reads through; the board softens instead of going dark. */
[data-family="glass"] .page { background: rgba(250,245,238,.74); border-color: rgba(255,255,255,.8);
  -webkit-backdrop-filter: blur(60px) saturate(180%); backdrop-filter: blur(60px) saturate(180%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 30px 80px rgba(50,30,10,.22); }
[data-theme="glass-dark"] .page { background: rgba(28,23,18,.72); border-color: rgba(255,255,255,.14); box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 30px 80px rgba(0,0,0,.5); }
[data-family="glass"] .page .ui > .tile:not(.cover) { -webkit-backdrop-filter: none; backdrop-filter: none; }
[data-family="glass"] body.paged .board, [data-family="glass"] body.paged #grid { filter: blur(8px) brightness(.9) saturate(.9); }

/* Mac app: the header runs under the traffic lights instead of leaving a strip above it. */
html.native .bar { padding-top: 40px; }
/* Like a native app: the bar, board and tiles don't select (or show a text cursor); a note's text and fields still do */
html.native body { -webkit-user-select: none; user-select: none; cursor: default; }
html.native :is(input, textarea, [contenteditable], .md, pre, code) { -webkit-user-select: text; user-select: text; cursor: auto; }

/* Mac app: no scrollbars (trackpad scrolling still works). */
html.native ::-webkit-scrollbar { display: none; }
html.native { scrollbar-width: none; }