/* ═══════════════════════════════════════════════════════════════════════════
 * Kallisto — Theme UI Systems
 * Each theme gets a distinct typographic + decorative + structural language.
 * Layer order:  …themes.css → theme-personality.css → THIS FILE (overrides).
 *
 *   default   →  Apple Glass     (current baseline)
 *   dark-glass→  Cinema Luxury   (heavy serif-y caps, gold rim, vignette)
 *   light-warm→  Editorial Paper (serif accent, paper noise, underline rules)
 *   dark-yel  →  Terminal HUD    (all-mono, brackets, scanlines, [cursor_])
 *   bw        →  Swiss Brutalist (ultra bold caps, hard rules, square marks)
 *   mocha     →  Artisan Pour    (italic accent, soft stitch lines)
 *   sage      →  Spa Calm        (light weight, wide tracking, breathing)
 *   midnight  →  Mission Control (mono labels, tactical brackets [ … ])
 *   coral     →  Bubble Pop      (rounded soft, springy underline)
 *   obsidian  →  Cron Premium    (tight tight, micro caps, sliver underline)
 *   neumorph  →  Soft Clay       (claymorphic — covered separately)
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ═════════════════════════════════════════════════════════════════════════
 * DARK GLASS — Cinema Luxury
 * ═════════════════════════════════════════════════════════════════════════ */
[data-theme="dark-glass"] .ds-section h2 {
  font-weight: 700; letter-spacing: -0.03em;
}
[data-theme="dark-glass"] .ds-section-title,
[data-theme="dark-glass"] .ds-label,
[data-theme="dark-glass"] .kal-eyebrow {
  letter-spacing: 0.18em; color: #c8a878;
}
[data-theme="dark-glass"] .ds-section-mark {
  background: linear-gradient(135deg, #f4c97a, #b89b6e);
  box-shadow: 0 0 14px rgba(244,201,122,0.5);
}
[data-theme="dark-glass"] .kal-tile { position: relative; }
[data-theme="dark-glass"] .kal-tile::before,
[data-theme="dark-glass"] .kal-tile::after {
  content: ''; position: absolute; width: 14px; height: 14px; pointer-events: none;
  border-color: rgba(244,201,122,0.30); border-style: solid; border-width: 0;
}
[data-theme="dark-glass"] .kal-tile::before { top: 8px; left: 8px;   border-top-width: 1px; border-left-width: 1px; }
[data-theme="dark-glass"] .kal-tile::after  { bottom: 8px; right: 8px; border-bottom-width: 1px; border-right-width: 1px; }
[data-theme="dark-glass"] body::after {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 1;
  background: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,0.4) 120%);
}

/* ═════════════════════════════════════════════════════════════════════════
 * LIGHT WARM — Editorial Paper
 * ═════════════════════════════════════════════════════════════════════════ */
[data-theme="light-warm"] .ds-section h2 {
  font-family: 'DM Serif Display', 'Georgia', serif;
  font-weight: 400; font-style: italic; letter-spacing: -0.01em;
  border-bottom: 2px solid var(--ink); padding-bottom: 4px;
  display: inline-block;
}
[data-theme="light-warm"] .ds-section-title {
  font-style: italic; letter-spacing: 0.06em;
}
[data-theme="light-warm"] .ds-section-mark {
  border-radius: 0; transform: rotate(45deg); width: 8px; height: 8px;
  background: var(--violet); box-shadow: none;
}
[data-theme="light-warm"] .kal-card,
[data-theme="light-warm"] .kal-tile {
  background-blend-mode: multiply;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/><feColorMatrix values='0 0 0 0 0.55  0 0 0 0 0.40  0 0 0 0 0.22  0 0 0 0.035 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"),
    radial-gradient(circle at 20% 30%, rgba(232,120,58,0.04) 0, transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(232,120,58,0.03) 0, transparent 40%);
}

/* ═════════════════════════════════════════════════════════════════════════
 * DARK YELLOW — Terminal HUD
 * ═════════════════════════════════════════════════════════════════════════ */
[data-theme="dark-yellow"] .ds-section h2,
[data-theme="dark-yellow"] .kal-tile__title,
[data-theme="dark-yellow"] .kal-card__title,
[data-theme="dark-yellow"] .kal-card__value,
[data-theme="dark-yellow"] .kal-kpi__value,
[data-theme="dark-yellow"] .kal-tile__value,
[data-theme="dark-yellow"] .kal-liquid__pct {
  font-family: var(--font-mono); letter-spacing: 0;
}
[data-theme="dark-yellow"] .ds-section h2 {
  text-transform: uppercase; font-size: 22px; letter-spacing: 0.04em;
}
[data-theme="dark-yellow"] .ds-section h2::before { content: '> '; color: #f5d547; opacity: 0.7; }
[data-theme="dark-yellow"] .ds-section h2::after {
  content: '_'; display: inline-block; color: #f5d547;
  animation: kal-blink 1.1s steps(1) infinite;
}
@keyframes kal-blink { 50% { opacity: 0; } }
[data-theme="dark-yellow"] .ds-section-title,
[data-theme="dark-yellow"] .ds-label,
[data-theme="dark-yellow"] .kal-tile__label,
[data-theme="dark-yellow"] .kal-eyebrow {
  font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.14em;
}
[data-theme="dark-yellow"] .ds-section-mark {
  background: #f5d547; border-radius: 0; width: 8px; height: 8px;
  box-shadow: 0 0 12px #f5d547;
}
[data-theme="dark-yellow"] .kal-btn {
  font-family: var(--font-mono); text-transform: uppercase;
  letter-spacing: 0.08em; font-size: 11px; border-radius: 4px;
}
[data-theme="dark-yellow"] .kal-tag { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; }
[data-theme="dark-yellow"] .kal-tile__title::before { content: '['; opacity: 0.4; margin-right: 4px; }
[data-theme="dark-yellow"] .kal-tile__title::after  { content: ']'; opacity: 0.4; margin-left:  4px; }

/* ═════════════════════════════════════════════════════════════════════════
 * B&W — Swiss Brutalist
 * ═════════════════════════════════════════════════════════════════════════ */
[data-theme="bw"] .ds-section h2 {
  font-weight: 900; text-transform: uppercase; letter-spacing: -0.04em;
  font-size: 36px; line-height: 1;
  border-bottom: 3px solid #000; padding-bottom: 14px;
}
[data-theme="bw"] .ds-section-title { text-transform: uppercase; letter-spacing: 0.14em; font-weight: 700; }
[data-theme="bw"] .ds-section-mark { background: #000; border-radius: 0; box-shadow: none; width: 10px; height: 10px; }
[data-theme="bw"] .kal-btn { font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; font-size: 11px; }
[data-theme="bw"] .kal-tile__title,
[data-theme="bw"] .kal-card__title {
  font-weight: 800; text-transform: uppercase; letter-spacing: -0.01em;
}
[data-theme="bw"] .kal-eyebrow {
  background: none; -webkit-text-fill-color: #000; color: #000;
  font-weight: 700; letter-spacing: 0.18em;
}
[data-theme="bw"] .kal-tile,
[data-theme="bw"] .kal-card {
  background-image:
    repeating-linear-gradient(135deg, transparent 0 16px, rgba(0,0,0,0.015) 16px 17px);
}

/* ═════════════════════════════════════════════════════════════════════════
 * MOCHA — Artisan Pour
 * ═════════════════════════════════════════════════════════════════════════ */
[data-theme="mocha"] .ds-section h2 {
  font-family: 'DM Serif Display', 'Georgia', serif; font-style: italic;
  font-weight: 400; letter-spacing: -0.01em;
}
[data-theme="mocha"] .ds-section-title { font-style: italic; }
[data-theme="mocha"] .ds-section-mark {
  width: 10px; height: 10px;
  border-radius: 60% 40% 50% 50% / 40% 60% 40% 60%;
  background: var(--violet); box-shadow: none;
  animation: kal-morph 6s ease-in-out infinite;
}
[data-theme="mocha"] .kal-tile__icon,
[data-theme="mocha"] .kal-tile__power,
[data-theme="mocha"] .kal-tile__corner {
  border-style: dashed; border-color: rgba(138,90,59,0.35);
}

/* ═════════════════════════════════════════════════════════════════════════
 * SAGE — Spa Calm
 * ═════════════════════════════════════════════════════════════════════════ */
[data-theme="sage"] .ds-section h2 {
  font-weight: 300; letter-spacing: 0.01em;
}
[data-theme="sage"] .ds-section-title,
[data-theme="sage"] .ds-label,
[data-theme="sage"] .kal-eyebrow { letter-spacing: 0.20em; font-weight: 500; }
[data-theme="sage"] .ds-section-mark {
  background: var(--violet); box-shadow: none;
  animation: kal-breathe 3.5s ease-in-out infinite;
}
[data-theme="sage"] .kal-tile__title { font-weight: 500; letter-spacing: 0; }
[data-theme="sage"] .kal-btn { letter-spacing: 0.03em; }

/* ═════════════════════════════════════════════════════════════════════════
 * MIDNIGHT — Mission Control
 * ═════════════════════════════════════════════════════════════════════════ */
[data-theme="midnight"] .ds-section h2 {
  font-family: var(--font-mono); text-transform: uppercase;
  font-size: 22px; font-weight: 500; letter-spacing: 0.06em;
}
[data-theme="midnight"] .ds-section h2::before { content: '[ '; color: var(--violet); opacity: 0.7; }
[data-theme="midnight"] .ds-section h2::after  { content: ' ]'; color: var(--violet); opacity: 0.7; }
[data-theme="midnight"] .ds-section-title,
[data-theme="midnight"] .ds-label,
[data-theme="midnight"] .kal-tile__label,
[data-theme="midnight"] .kal-eyebrow {
  font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--violet);
}
[data-theme="midnight"] .ds-section-mark {
  background: var(--violet); box-shadow: 0 0 14px var(--violet);
  width: 8px; height: 8px; border-radius: 0; transform: rotate(45deg);
}
[data-theme="midnight"] .kal-btn { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; font-size: 11px; }
[data-theme="midnight"] .kal-tile__title { font-family: var(--font-mono); letter-spacing: 0.03em; }

/* ═════════════════════════════════════════════════════════════════════════
 * CORAL — Bubble Pop
 * ═════════════════════════════════════════════════════════════════════════ */
[data-theme="coral"] .ds-section h2 {
  font-weight: 700; letter-spacing: -0.025em; position: relative;
}
[data-theme="coral"] .ds-section h2::after {
  content: ''; display: block; width: 60px; height: 6px;
  margin-top: 8px; border-radius: 999px;
  background: linear-gradient(90deg, var(--violet), var(--sky));
}
[data-theme="coral"] .ds-section-mark {
  background: linear-gradient(135deg, var(--violet), var(--sky));
  width: 12px; height: 12px; box-shadow: 0 0 14px rgba(232,90,85,0.5);
  animation: kal-breathe 2.5s ease-in-out infinite;
}
[data-theme="coral"] .kal-tile__title,
[data-theme="coral"] .kal-card__title {
  font-weight: 700; letter-spacing: -0.01em;
}
[data-theme="coral"] .kal-btn {
  font-weight: 600; letter-spacing: 0;
}

/* ═════════════════════════════════════════════════════════════════════════
 * OBSIDIAN — Cron Premium
 * ═════════════════════════════════════════════════════════════════════════ */
[data-theme="obsidian"] .ds-section h2 {
  font-weight: 500; letter-spacing: -0.025em; font-size: 24px;
  position: relative; padding-bottom: 8px;
}
[data-theme="obsidian"] .ds-section h2::after {
  content: ''; position: absolute; left: 0; bottom: 0; width: 36px; height: 1px;
  background: linear-gradient(90deg, var(--violet), transparent);
}
[data-theme="obsidian"] .ds-section-title,
[data-theme="obsidian"] .ds-label,
[data-theme="obsidian"] .kal-tile__label,
[data-theme="obsidian"] .kal-eyebrow {
  font-size: 9px; letter-spacing: 0.20em; font-weight: 600;
}
[data-theme="obsidian"] .ds-section-mark {
  background: var(--violet); box-shadow: none;
  width: 4px; height: 4px;
}
[data-theme="obsidian"] .kal-btn { letter-spacing: 0.01em; font-size: 12px; }
[data-theme="obsidian"] .kal-tile__title { font-weight: 500; letter-spacing: -0.01em; }

/* ═════════════════════════════════════════════════════════════════════════
 * NEUMORPH — Soft Clay (typographic accent)
 * ═════════════════════════════════════════════════════════════════════════ */
[data-theme="neumorph"] .ds-section h2 {
  font-weight: 600; letter-spacing: -0.02em;
}
[data-theme="neumorph"] .ds-section-mark {
  background: linear-gradient(135deg, var(--violet), var(--sky));
  width: 10px; height: 10px;
  box-shadow:
    inset 1px 1px 2px rgba(255,255,255,0.4),
    0 0 12px rgba(216,85,255,0.5);
}
[data-theme="neumorph"] .kal-tile__title { font-weight: 600; }
[data-theme="neumorph"] .ds-section-title,
[data-theme="neumorph"] .ds-label,
[data-theme="neumorph"] .kal-eyebrow {
  letter-spacing: 0.16em;
}