/*
 * B1025 Theme Block A — isolated candidate
 * Contract: html[data-theme="light" | "dark"]
 * Intended cascade: inline base -> emerald.css -> this file -> release1-access.css
 * Visual layer only. No runtime, layout, content, or state ownership.
 */

html[data-theme="light"] .app {
  color-scheme: light;

  --bg: #f4fbf7;
  --bg-deep: #e7f5ee;
  --surface: rgba(255, 255, 255, .82);
  --surface-strong: #ffffff;
  --text: #10271f;
  --muted: #687a73;
  --emerald: #087655;
  --emerald-bright: #12a878;
  --gold: #b68a37;
  --gold2: #8e6825;
  --line: rgba(8, 118, 85, .14);
  --glow: rgba(18, 168, 120, .13);
  --shadow: 0 24px 70px rgba(12, 75, 57, .10);
  --control-bg: rgba(255, 255, 255, .88);
  --focus-ring: rgba(18, 168, 120, .16);
  --danger: #b94b55;
  --radius-lg: 30px;
  --radius-md: 22px;
  --radius-sm: 14px;

  --bg0: var(--bg);
  --bg1: var(--bg-deep);
  --card: var(--surface);
  --cyan: var(--emerald-bright);
  --ok: var(--emerald);
}

html[data-theme="dark"] .app {
  color-scheme: dark;

  --bg: #020806;
  --bg-deep: #001b14;
  --surface: rgba(5, 31, 24, .74);
  --surface-strong: #082b22;
  --text: #f1f8f4;
  --muted: #9bb4aa;
  --emerald: #24c995;
  --emerald-bright: #53e0b2;
  --gold: #d7ad55;
  --gold2: #ffe2a0;
  --line: rgba(215, 173, 85, .19);
  --glow: rgba(36, 201, 149, .16);
  --shadow: 0 28px 90px rgba(0, 0, 0, .42);
  --control-bg: rgba(3, 25, 19, .86);
  --focus-ring: rgba(83, 224, 178, .17);
  --danger: #ff8994;
  --radius-lg: 30px;
  --radius-md: 22px;
  --radius-sm: 14px;

  --bg0: var(--bg);
  --bg1: var(--bg-deep);
  --card: var(--surface);
  --cyan: var(--emerald-bright);
  --ok: var(--emerald);
}

html[data-theme="light"]:root {
  background-color: #f4fbf7;
}

html[data-theme="dark"]:root {
  background-color: #020806;
}

html[data-theme="light"]:root body {
  color: #10271f;
  background-color: #f4fbf7;
  background-image:
    radial-gradient(850px 520px at 92% -8%, rgba(18, 168, 120, .12), transparent 65%),
    radial-gradient(720px 500px at -10% 72%, rgba(102, 225, 185, .11), transparent 64%),
    linear-gradient(145deg, #f5fffb 0%, #ffffff 46%, #effbf6 100%);
}

html[data-theme="dark"]:root body {
  color: #f1f8f4;
  background-color: #020806;
  background-image:
    radial-gradient(900px 620px at 88% -8%, rgba(36, 201, 149, .16), transparent 62%),
    radial-gradient(760px 560px at -12% 52%, rgba(0, 112, 80, .12), transparent 68%),
    linear-gradient(155deg, #020806, #001b14);
}

html[data-theme] .app,
html[data-theme] .app :is(.header, .logo) {
  color: var(--text);
}

html[data-theme] .app .logo {
  color: var(--gold2);
  text-shadow: 0 8px 30px var(--glow);
}

html[data-theme] .app :is(.card, .user-card, .metric, .track-box, .admin-panel, .protocol-item, .admin-order-card, .admin-customer-card, .admin-audit-card) {
  color: var(--text);
  border-color: var(--line);
  background-color: var(--surface);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, .05);
  backdrop-filter: blur(18px) saturate(1.08);
}

html[data-theme="light"] .app .card {
  background: rgba(255, 255, 255, .88);
}

html[data-theme="dark"] .app .card {
  background: rgba(5, 31, 24, .86);
}

html[data-theme] .app .card::after {
  background-color: transparent;
  background-image: none;
}

html[data-theme="light"] .app :is(.card, .user-card, .metric, .track-box, .admin-panel, .protocol-item, .admin-order-card, .admin-customer-card, .admin-audit-card) {
  background-color: rgba(255, 255, 255, .88);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, .88);
}

html[data-theme] .app :is(.btn, .btn.secondary, .btn.danger, input, select, textarea) {
  color: var(--text);
  border-color: var(--line);
  outline-color: transparent;
}

html[data-theme] .app :is(input, select, textarea) {
  background-color: var(--control-bg);
  accent-color: var(--emerald);
}

html[data-theme] .app :is(.btn, input, select, textarea):focus-visible {
  border-color: var(--emerald-bright);
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
  box-shadow: 0 0 24px var(--glow);
}

html[data-theme] .app .btn {
  color: #ffffff;
  background: linear-gradient(135deg, var(--emerald-bright), var(--emerald));
  box-shadow: 0 12px 28px var(--glow), inset 0 1px 0 rgba(255, 255, 255, .25);
}

html[data-theme] .app .btn.secondary {
  color: var(--text);
  background: var(--surface);
  box-shadow: none;
}

html[data-theme] .app .btn.danger {
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 42%, transparent);
  background: color-mix(in srgb, var(--danger) 10%, var(--surface));
  box-shadow: none;
}

html[data-theme] .app :is(.footer, .language-switch, .theme-switch) {
  color: var(--muted);
  border-color: var(--line);
  background-color: var(--surface);
  box-shadow: 0 12px 34px var(--glow);
  backdrop-filter: blur(16px);
}

html[data-theme] .app :is(.protocol-badge, .pill, .stage-pill) {
  color: var(--emerald);
  border-color: var(--line);
  background-color: color-mix(in srgb, var(--emerald) 9%, transparent);
}

html[data-theme] .app .scene {
  border-color: var(--line);
  background:
    radial-gradient(480px 220px at 50% 12%, var(--glow), transparent 60%),
    radial-gradient(400px 260px at 50% 72%, rgba(83, 224, 178, .08), transparent 65%),
    var(--surface);
  box-shadow: inset 0 0 80px var(--glow);
}

html[data-theme] .app .axis {
  background: linear-gradient(180deg, transparent, var(--emerald-bright), var(--gold), transparent);
  box-shadow: 0 0 18px var(--glow);
}

html[data-theme="light"] .app ~ .footer {
  color: #687a73;
  border-color: rgba(8, 118, 85, .14);
  background-color: rgba(255, 255, 255, .92);
  background-image: none;
  box-shadow: 0 -18px 46px rgba(12, 75, 57, .08);
}

html[data-theme="dark"] .app ~ .footer {
  color: #9bb4aa;
  border-color: rgba(215, 173, 85, .19);
  background-color: rgba(5, 31, 24, .94);
  background-image: none;
  box-shadow: 0 -18px 52px rgba(0, 0, 0, .28);
}

html[data-theme="light"] .app ~ .footer button.active {
  color: #087655;
  text-shadow: none;
  border-color: rgba(8, 118, 85, .14);
  background-color: rgba(18, 168, 120, .08);
  background-image: none;
  box-shadow: inset 0 0 18px rgba(18, 168, 120, .04);
}

html[data-theme="dark"] .app ~ .footer button.active {
  color: #53e0b2;
  text-shadow: none;
  border-color: rgba(215, 173, 85, .19);
  background-color: rgba(36, 201, 149, .08);
  background-image: none;
  box-shadow: inset 0 0 18px rgba(36, 201, 149, .04);
}

html[data-theme="light"] .app ~ .footer button.active .ico {
  color: #12a878;
  filter: drop-shadow(0 0 7px rgba(18, 168, 120, .28));
}

html[data-theme="dark"] .app ~ .footer button.active .ico {
  color: #d7ad55;
  filter: drop-shadow(0 0 7px rgba(215, 173, 85, .34));
}

html[data-theme] .app .admin-tabs button.active {
  color: var(--text);
  border-color: var(--gold);
  background-color: var(--surface);
  background-color: color-mix(in srgb, var(--emerald) 10%, var(--surface));
  background-image: none;
  box-shadow: inset 0 0 22px var(--glow);
}

html[data-theme="light"] .app ~ .global-player {
  color: #10271f;
  border-color: rgba(8, 118, 85, .14);
  background-color: #ffffff;
  background-image: none;
  box-shadow: 0 24px 70px rgba(12, 75, 57, .10);
}

html[data-theme="dark"] .app ~ .global-player {
  color: #f1f8f4;
  border-color: rgba(215, 173, 85, .19);
  background-color: #082b22;
  background-image: none;
  box-shadow: 0 28px 90px rgba(0, 0, 0, .42);
}

html[data-theme="light"] .app ~ .global-player .global-player-mode {
  color: #12a878;
}

html[data-theme="dark"] .app ~ .global-player .global-player-mode {
  color: #53e0b2;
}

html[data-theme="light"] .app ~ .global-player .global-player-seek {
  accent-color: #087655;
}

html[data-theme="dark"] .app ~ .global-player .global-player-seek {
  accent-color: #24c995;
}

html[data-theme="light"] .app ~ .global-player .global-player-status.error {
  color: #b94b55;
}

html[data-theme="dark"] .app ~ .global-player .global-player-status.error {
  color: #ff8994;
}

@supports not (backdrop-filter: blur(1px)) {
  html[data-theme] .app :is(.card, .user-card, .metric, .track-box, .admin-panel, .protocol-item, .admin-order-card, .admin-customer-card, .admin-audit-card, .footer, .language-switch, .theme-switch) {
    background-color: var(--surface-strong);
  }
}

@supports not (color: color-mix(in srgb, #000 50%, #fff)) {
  html[data-theme] .app .btn.danger {
    border-color: var(--danger);
    background: var(--surface);
  }

  html[data-theme] .app :is(.protocol-badge, .pill, .stage-pill) {
    background-color: var(--surface);
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-theme] .app {
    scroll-behavior: auto;
  }

  html[data-theme] .app :is(.header, .logo, .card, .user-card, .metric, .track-box, .admin-panel, .protocol-item, .admin-order-card, .admin-customer-card, .admin-audit-card, .btn, input, select, textarea, .footer, .language-switch, .theme-switch, .scene, .axis, .protocol-badge, .pill, .stage-pill) {
    animation-duration: .01ms;
    animation-iteration-count: 1;
    transition-duration: .01ms;
  }
}