/* ============================================================
   themes.css — style exploration layer
   four full themes + per-axis overrides (density, phase encoding,
   brand glyph, accent, corners, type family)
   ============================================================ */

/* ---------- theme: collective (default — dark mono) ------- */
body[data-theme="collective"] {
  --bg:        #0E1116;
  --bg-2:      #14181F;
  --fg:        #E6E8EB;
  --accent:    var(--accent-pref, #D97757);
  --fg-95:     rgba(230, 232, 235, 0.95);
  --fg-70:     rgba(230, 232, 235, 0.70);
  --fg-40:     rgba(230, 232, 235, 0.40);
  --fg-12:     rgba(230, 232, 235, 0.12);
  --fg-06:     rgba(230, 232, 235, 0.06);
  --fg-03:     rgba(230, 232, 235, 0.03);
  color-scheme: dark;
}

/* ---------- theme: paper (light mono, inverted register) -- */
body[data-theme="paper"] {
  --bg:        #F4F1EA;
  --bg-2:      #ECE7DC;
  --fg:        #1B1A17;
  --accent:    var(--accent-pref, #C84A2E);
  --fg-95:     rgba(27, 26, 23, 0.95);
  --fg-70:     rgba(27, 26, 23, 0.70);
  --fg-40:     rgba(27, 26, 23, 0.40);
  --fg-12:     rgba(27, 26, 23, 0.16);
  --fg-06:     rgba(27, 26, 23, 0.08);
  --fg-03:     rgba(27, 26, 23, 0.04);
  color-scheme: light;
}

/* ---------- theme: studio (light sans, modern productivity) */
body[data-theme="studio"] {
  --bg:        #FFFFFF;
  --bg-2:      #F7F8FA;
  --fg:        #0F1115;
  --accent:    var(--accent-pref, #2A6FDB);
  --fg-95:     rgba(15, 17, 21, 0.95);
  --fg-70:     rgba(15, 17, 21, 0.62);
  --fg-40:     rgba(15, 17, 21, 0.38);
  --fg-12:     rgba(15, 17, 21, 0.10);
  --fg-06:     rgba(15, 17, 21, 0.05);
  --fg-03:     rgba(15, 17, 21, 0.03);
  color-scheme: light;
}

/* ---------- theme: editorial (warm cream, serif body) ----- */
body[data-theme="editorial"] {
  --bg:        #FBF7EF;
  --bg-2:      #F3EDDE;
  --fg:        #25201A;
  --accent:    var(--accent-pref, #8B2E2A);
  --fg-95:     rgba(37, 32, 26, 0.95);
  --fg-70:     rgba(37, 32, 26, 0.70);
  --fg-40:     rgba(37, 32, 26, 0.45);
  --fg-12:     rgba(37, 32, 26, 0.16);
  --fg-06:     rgba(37, 32, 26, 0.08);
  --fg-03:     rgba(37, 32, 26, 0.04);
  color-scheme: light;
}

/* ---------- theme: geelen (slate / pale-blue, sober consulting) ---------- */
body[data-theme="geelen"] {
  --bg:        #0F141A;
  --bg-2:      #161D26;
  --fg:        #D9E1EC;
  --accent:    var(--accent-pref, #9CB8D9);
  --fg-95:     rgba(217, 225, 236, 0.95);
  --fg-70:     rgba(217, 225, 236, 0.70);
  --fg-40:     rgba(217, 225, 236, 0.40);
  --fg-12:     rgba(217, 225, 236, 0.14);
  --fg-06:     rgba(217, 225, 236, 0.06);
  --fg-03:     rgba(217, 225, 236, 0.03);
  color-scheme: dark;
}
body[data-theme="geelen"] .brand-dragon { opacity: 1; }
body[data-theme="geelen"] .view-h1 em { color: var(--accent); font-style: italic; }
body[data-theme="geelen"] .cc-wordmark {
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 13px;
}

/* ---------- theme: brutalist (pure white, hot accent) ----- */
body[data-theme="brutalist"] {
  --bg:        #FFFFFF;
  --bg-2:      #FFFFFF;
  --fg:        #000000;
  --accent:    var(--accent-pref, #FF2E63);
  --fg-95:     rgba(0, 0, 0, 0.95);
  --fg-70:     rgba(0, 0, 0, 0.70);
  --fg-40:     rgba(0, 0, 0, 0.45);
  --fg-12:     rgba(0, 0, 0, 0.20);
  --fg-06:     rgba(0, 0, 0, 0.10);
  --fg-03:     rgba(0, 0, 0, 0.04);
  color-scheme: light;
}
body[data-theme="brutalist"] .ghost,
body[data-theme="brutalist"] .primary,
body[data-theme="brutalist"] .proj,
body[data-theme="brutalist"] .kbd-btn,
body[data-theme="brutalist"] .chip,
body[data-theme="brutalist"] .seg-btn,
body[data-theme="brutalist"] .lib-card,
body[data-theme="brutalist"] .proj-card,
body[data-theme="brutalist"] .export-card,
body[data-theme="brutalist"] kbd {
  border-width: 2px;
  border-color: #000;
}

/* ============================================================
   AXIS: type family
   ============================================================ */
body[data-type="mono"] {
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, "Menlo", "Consolas", monospace;
  font-family: var(--font-mono);
}
body[data-type="sans"] {
  --font-mono: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-family: var(--font-mono);
  letter-spacing: -0.005em;
}
body[data-type="serif"] {
  --font-mono: "Newsreader", Georgia, "Times New Roman", serif;
  font-family: var(--font-mono);
}

/* In sans/serif modes, the wordmark should breathe a touch larger */
body[data-type="sans"] .cc-wordmark,
body[data-type="serif"] .cc-wordmark {
  font-size: 15px;
  letter-spacing: 0;
}

/* mono columns in agenda only need monospace tightness */
body[data-type="sans"] .col-time,
body[data-type="serif"] .col-time,
body[data-type="sans"] .col-dur,
body[data-type="serif"] .col-dur,
body[data-type="sans"] kbd,
body[data-type="serif"] kbd {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 12px;
}

body[data-type="serif"] .view-h1,
body[data-type="serif"] .insp-h1 {
  font-weight: 500;
  letter-spacing: 0;
}
body[data-type="serif"] .col-title,
body[data-type="serif"] .insp-v {
  line-height: 1.5;
}

/* ============================================================
   AXIS: density
   ============================================================ */
body[data-density="compact"] {
  font-size: 13px;
}
body[data-density="compact"] .row { padding: 6px 12px; }
body[data-density="compact"] .view { padding: var(--space-2) var(--space-3); }
body[data-density="compact"] .view-head { margin-bottom: var(--space-2); padding-bottom: 10px; }
body[data-density="compact"] .rail-item { padding: 5px 14px 5px 12px; font-size: 12px; }
body[data-density="compact"] .insp-h1 { font-size: 15px; }
body[data-density="compact"] .view-h1 { font-size: 19px; }

body[data-density="cozy"] {
  font-size: 14px;
}
body[data-density="cozy"] .row { padding: 14px 14px; }
body[data-density="cozy"] .view { padding: var(--space-4) calc(var(--space-4) + 8px); }
body[data-density="cozy"] .rail-item { padding: 10px 14px 10px 12px; }
body[data-density="cozy"] .insp-h1 { font-size: 19px; }
body[data-density="cozy"] .view-h1 { font-size: 26px; }

/* ============================================================
   AXIS: phase encoding
   ============================================================ */
/* default — text: leave as-is */

/* dot */
body[data-phase="dot"] .col-phase .pp::before,
body[data-phase="dot"] .col-phase .pp::after { content: ""; }
body[data-phase="dot"] .col-phase .pp {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--fg-70);
}
body[data-phase="dot"] .col-phase .pp::before {
  content: "";
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--phase-color, var(--fg-40));
}
body[data-phase="dot"] .row[data-phase-key="opener"]    { --phase-color: #4ea16d; }
body[data-phase="dot"] .row[data-phase-key="main"]      { --phase-color: #6b8df2; }
body[data-phase="dot"] .row[data-phase-key="closer"]    { --phase-color: #d35a55; }
body[data-phase="dot"] .row[data-phase-key="energizer"] { --phase-color: #e08a3d; }
body[data-phase="dot"] .row[data-phase-key="transition"]{ --phase-color: #9c7bd0; }
body[data-phase="dot"] .row[data-phase-key="pause"]     { --phase-color: var(--fg-40); }

/* bar — colored left border on the row, hide phase column text */
body[data-phase="bar"] .col-phase { color: var(--fg-40); font-size: 11px; }
body[data-phase="bar"] .col-phase .pp::before,
body[data-phase="bar"] .col-phase .pp::after { content: ""; }
body[data-phase="bar"] .row { border-left: 3px solid var(--phase-color, transparent); padding-left: 9px; }
body[data-phase="bar"] .row[data-phase-key="opener"]    { --phase-color: #4ea16d; }
body[data-phase="bar"] .row[data-phase-key="main"]      { --phase-color: #6b8df2; }
body[data-phase="bar"] .row[data-phase-key="closer"]    { --phase-color: #d35a55; }
body[data-phase="bar"] .row[data-phase-key="energizer"] { --phase-color: #e08a3d; }
body[data-phase="bar"] .row[data-phase-key="transition"]{ --phase-color: #9c7bd0; }
body[data-phase="bar"] .row[data-phase-key="pause"]     { --phase-color: var(--fg-12); }
body[data-phase="bar"] .row-head { border-left: 3px solid transparent; padding-left: 9px; }

/* none — drop the phase column visually */
body[data-phase="none"] .col-phase { visibility: hidden; }

/* ============================================================
   AXIS: brand glyph — change the // mark
   ============================================================ */
body[data-glyph="slash"] .cc-slash::before { content: ""; }
body[data-glyph="arrow"] .cc-slash { font-size: inherit; }
body[data-glyph="arrow"] .cc-slash::before { content: "→"; }
body[data-glyph="arrow"] .cc-slash > * { display: none; }
body[data-glyph="arrow"] .cc-slash { color: var(--accent); }

body[data-glyph="caret"] .cc-slash::before { content: "›"; }
body[data-glyph="caret"] .cc-slash > * { display: none; }

body[data-glyph="dot"] .cc-slash::before { content: "●"; font-size: 0.6em; vertical-align: middle; }
body[data-glyph="dot"] .cc-slash > * { display: none; }

/* hide the literal "//" text inside .cc-slash when we replace it.
   The original markup is just text "//" — wrap rule using attribute */
body[data-glyph="arrow"] .cc-slash,
body[data-glyph="caret"] .cc-slash,
body[data-glyph="dot"] .cc-slash {
  font-size: 0;
}
body[data-glyph="arrow"] .cc-slash::before,
body[data-glyph="caret"] .cc-slash::before,
body[data-glyph="dot"] .cc-slash::before {
  font-size: 16px;   /* reset for the replacement glyph */
}

/* the "// " prefix on cards uses ::before content directly — override */
body[data-glyph="arrow"] .export-card .ex-h::before,
body[data-glyph="arrow"] .lib-card .lc-tags span::before,
body[data-glyph="arrow"] .row.is-pause .col-title::before {
  content: "→ ";
}
body[data-glyph="caret"] .export-card .ex-h::before,
body[data-glyph="caret"] .lib-card .lc-tags span::before,
body[data-glyph="caret"] .row.is-pause .col-title::before {
  content: "› ";
}
body[data-glyph="dot"] .export-card .ex-h::before,
body[data-glyph="dot"] .lib-card .lc-tags span::before,
body[data-glyph="dot"] .row.is-pause .col-title::before {
  content: "● ";
}

/* ============================================================
   AXIS: corner radius
   ============================================================ */
body[data-radius="square"] { --radius-2: 0px; }
body[data-radius="soft"]   { --radius-2: 4px; }
body[data-radius="round"]  { --radius-2: 10px; }

body[data-radius="square"] .lib-card,
body[data-radius="square"] .proj-card,
body[data-radius="square"] .export-card,
body[data-radius="square"] .palette,
body[data-radius="square"] .picker { border-radius: 0; }

body[data-radius="round"] .lib-card,
body[data-radius="round"] .proj-card,
body[data-radius="round"] .export-card,
body[data-radius="round"] .palette,
body[data-radius="round"] .picker { border-radius: 12px; }

/* ============================================================
   theme-specific component reskins
   ============================================================ */

/* paper / studio / editorial selected-row uses bg-2 instead of fg-06 */
body:not([data-theme="collective"]):not([data-theme="brutalist"]) .row.is-selected {
  background: var(--bg-2);
}
body:not([data-theme="collective"]):not([data-theme="brutalist"]) .row:hover {
  background: var(--bg-2);
}
body:not([data-theme="collective"]):not([data-theme="brutalist"]) .rail-item.is-active {
  background: var(--bg-2);
}

/* selection on light themes */
body[data-theme="paper"] ::selection,
body[data-theme="studio"] ::selection,
body[data-theme="editorial"] ::selection,
body[data-theme="brutalist"] ::selection {
  background: var(--accent);
  color: #fff;
}

/* editorial: serif headlines feel right with a touch more letter air */
body[data-theme="editorial"][data-type="serif"] .view-h1 {
  font-style: italic;
  font-weight: 500;
}

/* studio: shadows are allowed here — productivity register */
body[data-theme="studio"] .palette {
  box-shadow: 0 12px 40px rgba(15, 17, 21, 0.10), 0 2px 8px rgba(15, 17, 21, 0.06);
}
body[data-theme="studio"] .picker {
  box-shadow: 0 8px 24px rgba(15, 17, 21, 0.08);
}

/* brutalist: hard shadows */
body[data-theme="brutalist"] .palette,
body[data-theme="brutalist"] .picker {
  box-shadow: 6px 6px 0 0 #000;
  border-color: #000;
}
body[data-theme="brutalist"] .row.is-selected {
  background: var(--accent);
  color: #fff;
}
body[data-theme="brutalist"] .row.is-selected .col-num,
body[data-theme="brutalist"] .row.is-selected .col-time,
body[data-theme="brutalist"] .row.is-selected .col-dur,
body[data-theme="brutalist"] .row.is-selected .row-sub { color: rgba(255,255,255,0.85); }
body[data-theme="brutalist"] .row.is-selected .col-phase .pp { color: #fff; }
body[data-theme="brutalist"] .rail-item.is-active {
  background: #000;
  color: #fff;
}
body[data-theme="brutalist"] .rail-item.is-active .rail-sl { color: var(--accent); }

/* Tint the dragon on light themes so it sits in-register, not as a foreign blue mark */
body[data-theme="paper"] .brand-dragon,
body[data-theme="editorial"] .brand-dragon {
  filter: brightness(0.4) sepia(0.6);
  opacity: 0.85;
}
body[data-theme="studio"] .brand-dragon {
  filter: brightness(0.3);
  opacity: 0.9;
}
body[data-theme="brutalist"] .brand-dragon {
  filter: brightness(0) contrast(1);
  opacity: 1;
}

/* ============================================================
   Tweaks panel re-skin: monospace caption to match tool register
   ============================================================ */
.tp-host { font-family: var(--font-mono); }