/*
 * UNISON shared runtime foundation.
 * This is the only product-wide visual entry point. It consumes the
 * versioned Brand OS layers and provides compatibility aliases for existing
 * Django and React surfaces while they are migrated.
 */
@import url('/static/css/brand-primitives.css');
@import url('/static/css/brand-semantic.css');

:root {
  color-scheme: light;
  --unison-shell-ink: var(--unison-color-ink-950);
  --unison-shell-deep: #08101f;
  --unison-shell-panel: #111827;
  --unison-shell-muted: var(--unison-color-slate-500);
  --unison-glass: rgba(255, 255, 255, .76);
  --unison-glass-strong: rgba(255, 255, 255, .9);
  --unison-glass-border: rgba(255, 255, 255, .76);
  --unison-page-gradient: linear-gradient(180deg, #f7f8fb 0%, #eff2f8 52%, #e7ebf5 100%);
  --accent-1: var(--unison-color-accent-blue);
  --accent-2: var(--unison-color-accent-mint);
  --accent-3: #ff8e8e;
  --accent-4: #d9dde6;
  --accent-5: #8f9bff;
  --site-bg-solid: var(--unison-color-bg-default);
  --site-bg-top: #fbfbfc;
  --site-bg-mid: #f7f8fb;
  --site-bg-bottom: #f2f4f8;
  --site-bg-glow-a: rgba(90, 167, 255, .18);
  --site-bg-glow-b: rgba(120, 240, 215, .16);
  --site-bg-glow-c: rgba(186, 219, 255, .16);
  --text: var(--unison-color-text-primary);
  --muted: var(--unison-color-text-muted);
  --glass-bg: var(--unison-glass);
  --glass-border: var(--unison-glass-border);
  --glass-shadow: var(--unison-shadow-surface);
}

html[data-bg-theme='dark'] {
  color-scheme: dark;
  --unison-color-bg-default: #0b1120;
  --unison-color-bg-subtle: #111827;
  --unison-color-surface-default: #111827;
  --unison-color-surface-glass: rgba(15, 23, 42, .78);
  --unison-color-text-primary: #f8fafc;
  --unison-color-text-secondary: #cbd5e1;
  --unison-color-text-muted: #94a3b8;
  --unison-color-border-default: rgba(148, 163, 184, .24);
  --unison-shell-ink: #f8fafc;
  --unison-glass: rgba(15, 23, 42, .72);
  --unison-glass-strong: rgba(15, 23, 42, .9);
  --unison-glass-border: rgba(148, 163, 184, .28);
  --unison-page-gradient: linear-gradient(180deg, #111827 0%, #0b1120 52%, #070b14 100%);
  --site-bg-solid: #0b1120;
  --site-bg-top: #08101f;
  --site-bg-mid: #0b1120;
  --site-bg-bottom: #111827;
  --site-bg-glow-a: rgba(90, 167, 255, .16);
  --site-bg-glow-b: rgba(120, 240, 215, .14);
  --site-bg-glow-c: rgba(186, 219, 255, .12);
}

html, body { min-height: 100%; }
body { font-family: var(--unison-font-body); background: var(--unison-page-gradient); color: var(--unison-color-text-primary); }
button, input, select, textarea { font: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid color-mix(in srgb, var(--unison-color-focus-ring) 64%, transparent); outline-offset: 3px; }

/* Unified surfaces used by both Tailwind/Django and React routes. */
.glass-surface, .section-card, .dash-glass, .auth-card, .public-card,
.fan-cabinet-shell .glass-card-surface, .fan-cabinet-sidebar,
.top-header .bg-white, .nav-ribbon .bg-white {
  border-color: var(--unison-glass-border) !important;
  background: linear-gradient(145deg, var(--unison-glass-strong), var(--unison-glass)) !important;
  box-shadow: var(--unison-shadow-surface) !important;
  backdrop-filter: blur(var(--unison-blur-glass)) saturate(145%);
  -webkit-backdrop-filter: blur(var(--unison-blur-glass)) saturate(145%);
}

.site-shell-bg, .fan-cabinet-shell, .legacy-cabinet-shell, .page-content,
.home-shell, .public-main { color: var(--unison-color-text-primary); }
.ambient-bg, .home-ambient {
  background:
    radial-gradient(42rem 28rem at 8% 12%, var(--site-bg-glow-a), transparent 72%),
    radial-gradient(36rem 24rem at 92% 18%, var(--site-bg-glow-b), transparent 74%),
    radial-gradient(44rem 30rem at 30% 100%, var(--site-bg-glow-c), transparent 78%),
    var(--unison-page-gradient) !important;
}

.glass-pill, .glass-pill-soft, .header-chip, .auth-link-pill, .theme-toggle,
.primary-nav-link.is-active, .public-nav-lens {
  border-color: var(--unison-glass-border) !important;
  background: var(--unison-glass-strong) !important;
  color: var(--unison-color-text-primary) !important;
}

.fan-cabinet-shell button:not(:disabled), .fan-cabinet-shell a[role='button'],
.droplet-cta, .header-chip, .theme-toggle, .primary-nav-link, .public-nav a {
  transition: transform var(--unison-motion-standard) var(--unison-easing-out), box-shadow var(--unison-motion-standard) var(--unison-easing-out), background-color var(--unison-motion-standard) var(--unison-easing-out), border-color var(--unison-motion-standard) var(--unison-easing-out);
}
.fan-cabinet-shell button:not(:disabled):hover, .fan-cabinet-shell a[role='button']:hover,
.droplet-cta:hover, .header-chip:hover, .theme-toggle:hover { transform: translateY(-1px); }

/* Normalise status colours and calls to action across every surface. */
.bg-emerald-500, .bg-green-500 { background-color: var(--unison-color-status-success) !important; }
.text-emerald-600, .text-green-600 { color: var(--unison-color-status-success) !important; }
.text-rose-600, .text-red-600 { color: var(--unison-color-status-danger) !important; }
.bg-rose-500, .bg-red-500 { background-color: var(--unison-color-status-danger) !important; }
.bg-amber-500 { background-color: var(--unison-color-status-warning) !important; }

html[data-bg-theme='dark'] .text-slate-950, html[data-bg-theme='dark'] .text-slate-900,
html[data-bg-theme='dark'] .text-slate-800, html[data-bg-theme='dark'] .text-slate-700,
html[data-bg-theme='dark'] .text-neutral-900, html[data-bg-theme='dark'] .text-neutral-800 { color: var(--unison-color-text-primary) !important; }
html[data-bg-theme='dark'] .text-slate-600, html[data-bg-theme='dark'] .text-slate-500,
html[data-bg-theme='dark'] .text-slate-400, html[data-bg-theme='dark'] .text-neutral-600,
html[data-bg-theme='dark'] .text-neutral-500 { color: var(--unison-color-text-secondary) !important; }
html[data-bg-theme='dark'] input, html[data-bg-theme='dark'] select, html[data-bg-theme='dark'] textarea {
  border-color: var(--unison-color-border-default) !important;
  background: rgba(15, 23, 42, .84) !important;
  color: var(--unison-color-text-primary) !important;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 1ms !important; animation-duration: 1ms !important; animation-iteration-count: 1 !important; }
}