/* Kinoportal redesign — Stage 1: design tokens and global foundation */
:root {
  color-scheme: dark;

  --kp-bg: #070a12;
  --kp-bg-elevated: #0c1220;
  --kp-surface: rgba(17, 24, 39, .88);
  --kp-surface-solid: #111827;
  --kp-surface-2: #172033;
  --kp-surface-3: #202b42;
  --kp-surface-hover: #26334d;
  --kp-glass: rgba(15, 23, 42, .72);

  --kp-text: #f8fafc;
  --kp-text-muted: #a7b3c7;
  --kp-text-soft: #7f8da6;
  --kp-heading: #ffffff;

  --kp-primary: #8b5cf6;
  --kp-primary-hover: #7c3aed;
  --kp-primary-soft: rgba(139, 92, 246, .16);
  --kp-secondary: #3b82f6;
  --kp-cyan: #22d3ee;
  --kp-amber: #f59e0b;
  --kp-success: #22c55e;
  --kp-danger: #f43f5e;
  --kp-warning: #f59e0b;

  --kp-border: rgba(148, 163, 184, .18);
  --kp-border-strong: rgba(167, 139, 250, .38);
  --kp-focus: rgba(34, 211, 238, .42);

  --kp-shadow-xs: 0 4px 14px rgba(0, 0, 0, .18);
  --kp-shadow-sm: 0 10px 30px rgba(0, 0, 0, .24);
  --kp-shadow-md: 0 18px 48px rgba(0, 0, 0, .32);
  --kp-shadow-glow: 0 0 0 1px rgba(139, 92, 246, .22), 0 18px 46px rgba(76, 29, 149, .22);

  --kp-radius-sm: 10px;
  --kp-radius-md: 14px;
  --kp-radius-lg: 18px;
  --kp-radius-xl: 24px;
  --kp-radius-pill: 999px;

  --kp-space-1: 4px;
  --kp-space-2: 8px;
  --kp-space-3: 12px;
  --kp-space-4: 16px;
  --kp-space-5: 20px;
  --kp-space-6: 24px;
  --kp-space-8: 32px;
  --kp-space-10: 40px;

  --kp-container: 1260px;
  --kp-reading: 780px;
  --kp-font-body: "Manrope", "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --kp-font-heading: "Manrope", "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --kp-transition-fast: 150ms ease;
  --kp-transition: 240ms cubic-bezier(.2, .8, .2, 1);
  --kp-transition-slow: 420ms cubic-bezier(.2, .8, .2, 1);

  /* Existing portal variables mapped to the new system. */
  --kp-body-bg: var(--kp-bg);
  --kp-brand: var(--kp-primary);
  --kp-brand-strong: var(--kp-primary-hover);
  --kp-header-bg: rgba(7, 10, 18, .84);
  --kp-footer-bg: #080d18;
  --kp-footer-text: var(--kp-text);
  --kp-footer-muted: var(--kp-text-muted);
  --kp-input-bg: rgba(7, 10, 18, .72);
  --kp-input-border: var(--kp-border);
  --kp-input-text: var(--kp-text);
  --kp-shadow: var(--kp-shadow-md);
  --kp-ghost-bg: rgba(255, 255, 255, .055);
  --kp-ghost-border: var(--kp-border);
  --kp-page-max: var(--kp-container);
  --kp-header-font: var(--kp-font-body);

  --bg: var(--kp-bg);
  --page-bg: var(--kp-bg);
  --panel: var(--kp-surface-solid);
  --card: var(--kp-surface-solid);
  --card-bg: var(--kp-surface-solid);
  --text: var(--kp-text);
  --text-strong: var(--kp-heading);
  --muted: var(--kp-text-muted);
  --muted-2: var(--kp-text-muted);
  --muted2: var(--kp-text-soft);
  --line: var(--kp-border);
  --border: var(--kp-border);
  --border-2: rgba(148, 163, 184, .24);
  --border2: var(--kp-border);
  --brand: var(--kp-primary);
  --brand-hover: var(--kp-primary-hover);
  --brand-2: var(--kp-cyan);
  --brand2: var(--kp-cyan);
  --accent: var(--kp-primary);
  --accent-hover: var(--kp-primary-hover);
  --accent-2: var(--kp-cyan);
  --primary: var(--kp-primary);
  --primary-2: var(--kp-primary-hover);
  --primary-600: var(--kp-secondary);
  --success: var(--kp-success);
  --ok: var(--kp-success);
  --danger: var(--kp-danger);
  --err: var(--kp-danger);
  --warning: var(--kp-warning);
  --radius: var(--kp-radius-lg);
  --shadow: var(--kp-shadow-sm);
  --shadow-soft: var(--kp-shadow-xs);
  --card-border: var(--kp-border);
  --card-shadow: var(--kp-shadow-sm);
}

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

  --kp-bg: #f5f7ff;
  --kp-bg-elevated: #eef2ff;
  --kp-surface: rgba(255, 255, 255, .9);
  --kp-surface-solid: #ffffff;
  --kp-surface-2: #f7f8ff;
  --kp-surface-3: #edf1fb;
  --kp-surface-hover: #e7ecf8;
  --kp-glass: rgba(255, 255, 255, .76);

  --kp-text: #172033;
  --kp-text-muted: #5f6f85;
  --kp-text-soft: #7d8ca1;
  --kp-heading: #0f172a;

  --kp-primary: #7c3aed;
  --kp-primary-hover: #6d28d9;
  --kp-primary-soft: rgba(124, 58, 237, .10);
  --kp-secondary: #2563eb;
  --kp-cyan: #0891b2;
  --kp-amber: #d97706;

  --kp-border: rgba(30, 41, 59, .12);
  --kp-border-strong: rgba(124, 58, 237, .28);
  --kp-focus: rgba(8, 145, 178, .28);

  --kp-shadow-xs: 0 4px 14px rgba(15, 23, 42, .07);
  --kp-shadow-sm: 0 10px 30px rgba(15, 23, 42, .09);
  --kp-shadow-md: 0 18px 48px rgba(15, 23, 42, .12);
  --kp-shadow-glow: 0 0 0 1px rgba(124, 58, 237, .15), 0 18px 44px rgba(91, 33, 182, .10);

  --kp-header-bg: rgba(248, 250, 255, .86);
  --kp-footer-bg: #e9edf7;
  --kp-input-bg: rgba(255, 255, 255, .92);
  --kp-ghost-bg: rgba(91, 33, 182, .055);
}

html {
  min-width: 320px;
  scroll-behavior: smooth;
  background: var(--kp-bg);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body:not(.admin-body) {
  min-width: 320px;
  overflow-x: clip;
  font-family: var(--kp-font-body) !important;
  font-size: 15px;
  line-height: 1.6;
  color: var(--kp-text) !important;
  background:
    radial-gradient(circle at 12% -5%, rgba(139, 92, 246, .20), transparent 34rem),
    radial-gradient(circle at 92% 8%, rgba(34, 211, 238, .10), transparent 30rem),
    var(--kp-bg) !important;
  transition: background-color var(--kp-transition), color var(--kp-transition);
}

html[data-theme="light"] body:not(.admin-body) {
  background:
    radial-gradient(circle at 12% -5%, rgba(124, 58, 237, .10), transparent 34rem),
    radial-gradient(circle at 92% 8%, rgba(8, 145, 178, .07), transparent 30rem),
    var(--kp-bg) !important;
}

body:not(.admin-body),
body:not(.admin-body) button,
body:not(.admin-body) input,
body:not(.admin-body) select,
body:not(.admin-body) textarea {
  font-family: var(--kp-font-body) !important;
}

body:not(.admin-body) :where(h1, h2, h3, h4, h5, h6) {
  font-family: var(--kp-font-heading) !important;
  color: var(--kp-heading) !important;
  letter-spacing: -.025em;
  text-wrap: balance;
}

body:not(.admin-body) h1 { font-size: clamp(1.8rem, 4vw, 3rem); line-height: 1.08; }
body:not(.admin-body) h2 { font-size: clamp(1.35rem, 2.5vw, 2rem); line-height: 1.18; }
body:not(.admin-body) h3 { line-height: 1.25; }

body:not(.admin-body) :where(p, li, dd) { color: inherit; }
body:not(.admin-body) :where(.muted, .meta, .small, .empty, .filter-hint) { color: var(--kp-text-muted) !important; }
body:not(.admin-body) a { text-underline-offset: .18em; }

body:not(.admin-body) ::selection {
  background: rgba(139, 92, 246, .42);
  color: #fff;
}

body:not(.admin-body) :where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--kp-focus) !important;
  outline-offset: 2px;
}

body:not(.admin-body) img,
body:not(.admin-body) video,
body:not(.admin-body) iframe {
  max-width: 100%;
}

body:not(.admin-body) hr {
  border: 0;
  border-top: 1px solid var(--kp-border);
}

body:not(.admin-body)::-webkit-scrollbar,
body:not(.admin-body) *::-webkit-scrollbar {
  width: 11px;
  height: 11px;
}
body:not(.admin-body)::-webkit-scrollbar-track,
body:not(.admin-body) *::-webkit-scrollbar-track { background: transparent; }
body:not(.admin-body)::-webkit-scrollbar-thumb,
body:not(.admin-body) *::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, .30);
  border: 3px solid transparent;
  border-radius: var(--kp-radius-pill);
  background-clip: padding-box;
}
body:not(.admin-body)::-webkit-scrollbar-thumb:hover,
body:not(.admin-body) *::-webkit-scrollbar-thumb:hover { background-color: rgba(167, 139, 250, .56); }