/* ─────────────────────────────────────────────────────────────────
   Abyss — codex / dim study (deep indigo + violet rule + serif)
   Reading-mode: large serif body, low contrast chrome, glowing markers.
   ───────────────────────────────────────────────────────────────── */

html[data-theme="abyss"] {
  --color-background: oklch(11% 0.022 270);
  --color-foreground: oklch(89% 0.014 80);
  --color-card: oklch(13% 0.024 270);
  --color-card-foreground: oklch(91% 0.012 80);
  --color-popover: oklch(13% 0.024 270);
  --color-popover-foreground: oklch(91% 0.012 80);
  --color-primary: oklch(72% 0.16 300);
  --color-primary-foreground: oklch(11% 0.022 270);
  --color-secondary: oklch(18% 0.024 270);
  --color-secondary-foreground: oklch(85% 0.015 80);
  --color-muted: oklch(16% 0.024 270);
  --color-muted-foreground: oklch(60% 0.024 270);
  --color-accent: oklch(70% 0.13 300);
  --color-accent-foreground: oklch(92% 0.012 80);
  --color-destructive: oklch(60% 0.18 25);
  --color-destructive-foreground: oklch(92% 0.01 80);
  --color-border: oklch(24% 0.026 270 / 0.6);
  --color-input: oklch(24% 0.026 270 / 0.6);
  --color-ring: oklch(72% 0.16 300 / 0.55);

  --radius-sm: 0.125rem;
  --radius-md: 0.25rem;
  --radius-lg: 0.375rem;
  --radius-xl: 0.5rem;

  --font-sans:
    "Inter", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji";
  --font-display: "Fraunces", "Newsreader", ui-serif, Georgia, serif;
  --font-serif: "Fraunces", "Newsreader", ui-serif, Georgia, serif;
  --font-mono:
    "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --surface-page: var(--color-background);
  --surface-rail: oklch(13% 0.025 270);
  --surface-inset: oklch(15% 0.026 270);
  --surface-elevated: oklch(17% 0.028 270);
  --surface-dialog: oklch(17% 0.028 270);
  --surface-player: color-mix(in oklab, var(--color-primary) 14%, transparent);

  --surface-app: var(--surface-page);
  --surface-panel: var(--surface-rail);
  --surface-panel-strong: var(--surface-elevated);
  --surface-empty: color-mix(in oklab, var(--color-muted) 70%, transparent);
  --border-subtle: color-mix(in oklab, var(--color-border) 70%, transparent);

  --rule-color: oklch(24% 0.026 270);
  --rule-strong-color: oklch(58% 0.04 270);
  --rule-style: solid;

  --accent-primary: oklch(72% 0.16 300);
  --accent-secondary: oklch(70% 0.14 230);
  --accent-warning: oklch(75% 0.16 75);
  --accent-danger: oklch(70% 0.18 25);
  --accent-success: oklch(72% 0.13 155);

  /* Dim violet glow + indigo wash, denser noise */
  --ambience-image:
    radial-gradient(
      ellipse at 80% 0%,
      oklch(58% 0.18 300 / 0.16),
      transparent 55%
    ),
    radial-gradient(
      ellipse at 0% 100%,
      oklch(50% 0.14 230 / 0.14),
      transparent 55%
    );
  --noise-opacity: 0.06;

  --radius-card: var(--radius-md);
  --radius-control: var(--radius-sm);
  --radius-dialog: var(--radius-lg);
  --radius-chip: 999px;

  --panel-header-height: 2.875rem;
  --panel-section-padding-x: 1.125rem;
  --panel-section-padding-y: 0.875rem;
  --composer-max-width: 48rem;
  --session-column-max-width: 50rem;

  --eyebrow-font-family: var(--font-mono);
  --eyebrow-font-size: 0.625rem;
  --eyebrow-font-weight: 400;
  --eyebrow-letter-spacing: 0.18em;
  --eyebrow-text-transform: uppercase;

  --title-font-family: var(--font-serif);
  --title-font-style: italic;
  --title-font-weight: 400;
  --title-letter-spacing: -0.005em;
  --title-text-transform: none;

  --story-font-family: var(--font-serif);
  --story-font-size: 1.0625rem;
  --story-line-height: 1.8;
  --story-font-weight: 350;
  --story-letter-spacing: 0.005em;
  --story-max-width: 48rem;

  --shadow-card: 0 0 32px -16px oklch(72% 0.16 300 / 0.2);
  --shadow-dialog: 0 0 60px -20px oklch(70% 0.13 300 / 0.3);
  --shadow-pop: 0 12px 36px -20px oklch(0% 0 0 / 0.6);

  font-feature-settings: "ss01", "cv11", "kern", "liga";
}

html[data-theme="abyss"] .ui-message-row {
  align-items: flex-start;
}

html[data-theme="abyss"] .ui-player-message-row {
  justify-content: flex-start;
}

html[data-theme="abyss"] .ui-message-player {
  background: transparent;
  color: var(--color-foreground);
  border-width: 0 0 0 2px;
  border-color: var(--accent-primary);
  border-radius: 0;
  max-width: var(--story-max-width);
  padding: 0.25rem 0 0.25rem 0.875rem;
}

/* Abyss: bands have a glow on the marker bar */
html[data-theme="abyss"] .ui-band::before {
  box-shadow: 0 0 18px 0 var(--accent-primary);
  opacity: 0.85;
}
