/* Design-family themes for the review hub — token sets distilled from
   ~/bromiam/Resources/awesome-claude-design/design-md/<family>/ via the
   awesome-claude-design skill. Each family defines light AND dark so the
   mode toggle works everywhere. Base (b-rom brand) lives in the app. */

/* ── BRUTALIST — sharp, black rules, orange as signal ─────────────── */
[data-theme="brutalist"] {
  --ink: #000; --ink-soft: #444; --surface: #fff; --canvas: #fff;
  --line: #000; --accent: #ff6600; --accent-2: #e55c00;
  --accent-grad: linear-gradient(#ff6600, #ff6600);
  --checker-a: #f0f0f0; --checker-b: #fff; --shadow: rgba(0,0,0,0);
  --radius: 0px; --font: "Archivo", "Helvetica Neue", system-ui, sans-serif;
  --font-display: var(--font);
  --ok: #007a3d; --ok-bg: #e8f5ee; --warn: #b34700; --warn-bg: #ffe9d9;
  --fail: #c00; --fail-bg: #ffe5e5;
}
[data-theme="brutalist"] section.block, [data-theme="brutalist"] .card,
[data-theme="brutalist"] .stage { border-width: 2px; }
[data-theme="brutalist"][data-mode="dark"] {
  --ink: #fff; --ink-soft: #bbb; --surface: #000; --canvas: #000;
  --line: #fff; --checker-a: #171717; --checker-b: #000;
  --ok-bg: #04331d; --warn-bg: #3a1d00; --fail-bg: #380808;
}

/* ── CINEMATIC — black stage, signal green, grayscale chrome ──────── */
[data-theme="cinematic"] {
  --ink: #fff; --ink-soft: #b8b8b8; --surface: #1a1a1a; --canvas: #000;
  --line: #333; --accent: #76b900; --accent-2: #8fd400;
  --accent-grad: linear-gradient(135deg, #76b900, #8fd400);
  --checker-a: #141414; --checker-b: #0a0a0a; --shadow: rgba(0,0,0,.72);
  --radius: 4px; --font: "Helvetica Neue", system-ui, sans-serif;
  --font-display: var(--font);
  --ok: #8fd400; --ok-bg: #1d2b06; --warn: #ffb020; --warn-bg: #33260a;
  --fail: #ff5c5c; --fail-bg: #331010;
}
[data-theme="cinematic"] section.block > h2,
[data-theme="cinematic"] .concept.active,
[data-theme="cinematic"] .toolbar .tab.active,
[data-theme="cinematic"] .toolbar .toggle.on { color: #000; }
[data-theme="cinematic"][data-mode="light"] {
  --ink: #111; --ink-soft: #555; --surface: #f5f5f5; --canvas: #fff;
  --line: #ddd; --checker-a: #ececec; --checker-b: #fff; --shadow: rgba(0,0,0,.18);
  --ok-bg: #ecf5db; --warn-bg: #fff3dd; --fail-bg: #ffe7e7;
}

/* ── DATA-DENSE — observability shell, categorical purple ─────────── */
[data-theme="data-dense"] {
  --ink: #110617; --ink-soft: #51495d; --surface: #fff; --canvas: #f7f6f9;
  --line: #e3e0e8; --accent: #632ca6; --accent-2: #7c3aed;
  --accent-grad: linear-gradient(135deg, #632ca6, #7c3aed);
  --checker-a: #eeeaf3; --checker-b: #fff; --shadow: rgba(17,6,23,.12);
  --radius: 4px; --font: system-ui, -apple-system, sans-serif;
  --font-display: var(--font);
}
[data-theme="data-dense"] .tile .v, [data-theme="data-dense"] table.spec td:last-child {
  font-variant-numeric: tabular-nums; }
[data-theme="data-dense"][data-mode="dark"] {
  --ink: #fff; --ink-soft: #b8b0c4; --surface: #2a1f37; --canvas: #110617;
  --line: #3d3050; --checker-a: #221833; --checker-b: #191026; --shadow: rgba(0,0,0,.5);
  --ok-bg: #17362a; --warn-bg: #3a2c14; --fail-bg: #3a1a1a;
}

/* ── EDITORIAL — surgical minimalism, accent as punctuation ───────── */
[data-theme="editorial"] {
  --ink: #0f0f14; --ink-soft: #6b6b76; --surface: #fff; --canvas: #fafafa;
  --line: #e4e4e7; --accent: #5e6ad2; --accent-2: #4e5acb;
  --accent-grad: linear-gradient(#5e6ad2, #4e5acb);
  --checker-a: #f0f0f2; --checker-b: #fff; --shadow: rgba(0,0,0,.04);
  --radius: 7px; --font: "Inter", system-ui, sans-serif; --font-display: var(--font);
}
[data-theme="editorial"][data-mode="dark"] {
  --ink: #ededf0; --ink-soft: #8f8f9a; --surface: #1b1b1f; --canvas: #121215;
  --line: #2c2c31; --checker-a: #202024; --checker-b: #17171a; --shadow: rgba(0,0,0,.4);
  --ok-bg: #14301f; --warn-bg: #332510; --fail-bg: #331515;
}

/* ── GLASS — vibrancy materials, one system tint ──────────────────── */
[data-theme="glass"] {
  --ink: #1d1d1f; --ink-soft: rgba(60,60,67,.78); --surface: rgba(255,255,255,.72);
  --canvas: #f2f2f7; --line: rgba(60,60,67,.18); --accent: #007aff; --accent-2: #0a84ff;
  --accent-grad: linear-gradient(135deg, #007aff, #0a84ff);
  --checker-a: #e9e9ee; --checker-b: #f7f7fa; --shadow: rgba(0,0,0,.10);
  --radius: 13px; --font: -apple-system, "SF Pro Text", system-ui, sans-serif;
  --font-display: -apple-system, "SF Pro Display", system-ui, sans-serif;
}
[data-theme="glass"] section.block, [data-theme="glass"] nav, [data-theme="glass"] .card {
  backdrop-filter: blur(30px) saturate(180%); -webkit-backdrop-filter: blur(30px) saturate(180%); }
[data-theme="glass"][data-mode="dark"] {
  --ink: #f5f5f7; --ink-soft: rgba(235,235,245,.6); --surface: rgba(28,28,30,.72);
  --canvas: #000; --line: rgba(84,84,88,.65); --checker-a: #17171a; --checker-b: #0c0c0e;
  --shadow: rgba(0,0,0,.55); --ok-bg: #12341f; --warn-bg: #33250f; --fail-bg: #331414;
}

/* ── INDIE — warm cream, editorial serif, frosted warmth ──────────── */
[data-theme="indie"] {
  --ink: #1a1814; --ink-soft: #6a5f52; --surface: rgba(255,251,244,.85);
  --canvas: #faf8f2; --line: rgba(26,24,20,.10); --accent: #b45837; --accent-2: #e4b894;
  --accent-grad: linear-gradient(135deg, #b45837, #d07a52);
  --checker-a: #f0ebe1; --checker-b: #faf8f2; --shadow: rgba(180,88,55,.10);
  --radius: 12px; --font: system-ui, sans-serif;
  --font-display: "Iowan Old Style", Georgia, serif;
}
[data-theme="indie"] body { background: radial-gradient(120% 90% at 80% -10%, #f6e3d3 0%, #faf8f2 55%); }
[data-theme="indie"][data-mode="dark"] {
  --ink: #f0e9df; --ink-soft: #b3a695; --surface: rgba(38,33,27,.85); --canvas: #201c17;
  --line: rgba(240,233,223,.12); --checker-a: #2a251f; --checker-b: #201c17;
  --shadow: rgba(0,0,0,.45); --ok-bg: #1d3326; --warn-bg: #362811; --fail-bg: #361717;
}

/* ── PLAYFUL — two-step blue, soft round comfort ──────────────────── */
[data-theme="playful"] {
  --ink: #191f28; --ink-soft: #6b7684; --surface: #fff; --canvas: #f2f4f6;
  --line: #e5e8eb; --accent: #3182f6; --accent-2: #5a9bf8;
  --accent-grad: linear-gradient(135deg, #3182f6, #5a9bf8);
  --checker-a: #e8ecf0; --checker-b: #fff; --shadow: rgba(25,31,40,.08);
  --radius: 12px; --font: "Pretendard", system-ui, sans-serif; --font-display: var(--font);
}
[data-theme="playful"] .chip { border-radius: 999px; }
[data-theme="playful"][data-mode="dark"] {
  --ink: #ecf0f4; --ink-soft: #8f9aa8; --surface: #22272e; --canvas: #171b21;
  --line: #333a43; --checker-a: #20252c; --checker-b: #181d23; --shadow: rgba(0,0,0,.45);
  --ok-bg: #14331f; --warn-bg: #33260f; --fail-bg: #331616;
}

/* ── REMIX — Linear geometry, terracotta soul, serif display ──────── */
[data-theme="remix"] {
  --ink: #0f0f14; --ink-soft: #6b6b76; --surface: #f4f4f5; --canvas: #fff;
  --line: #e4e4e7; --accent: #c96442; --accent-2: #e89268;
  --accent-grad: linear-gradient(135deg, #c96442, #e89268);
  --checker-a: #f0efee; --checker-b: #fff; --shadow: rgba(15,15,20,.05);
  --radius: 7px; --font: "Inter", system-ui, sans-serif;
  --font-display: "Tiempos Headline", Georgia, serif;
}
[data-theme="remix"][data-mode="dark"] {
  --ink: #eceae8; --ink-soft: #97928c; --surface: #1e1c1a; --canvas: #141312;
  --line: #2e2b28; --checker-a: #211f1d; --checker-b: #171614; --shadow: rgba(0,0,0,.45);
  --ok-bg: #16301f; --warn-bg: #33250f; --fail-bg: #331515;
}