/*
 * ═══ OutaStory UI v2 — design token layer ═══
 * Everything here is scoped to html[data-ui="v2"] and is INERT unless App.Web
 * stamps the attribute (ui-v2-enabled flag). v1 stays pixel-identical.
 * Spec: docs/superpowers/specs/2026-07-07-ui-reinvention-design.md §2.
 * Palette pairs are enforced by UiV2ContrastTests — adjust lightness, keep hue,
 * if you change a value and the test fails.
 */

/* ── Mode-agnostic tokens ── */
html[data-ui="v2"] {
	/* Typography */
	--os-font-family: 'Inter', 'Inter-fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--os-font-display: 'Fraunces', 'Fraunces-fallback', Georgia, 'Times New Roman', serif;
	--os-text-display-xl: clamp(2.25rem, 1.5rem + 3vw, 3.75rem);
	--os-text-display-lg: clamp(1.75rem, 1.25rem + 2vw, 2.75rem);
	--os-text-display-md: clamp(1.375rem, 1.1rem + 1.1vw, 1.875rem);
	--os-text-display-sm: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);

	/* Radius (rounder, softer than v1) */
	--os-radius-sm: 10px;
	--os-radius-md: 14px;
	--os-radius-lg: 18px;
	--os-radius-xl: 28px;

	/* Motion */
	--os-motion-fast: 120ms;
	--os-motion-base: 200ms;
	--os-motion-slow: 320ms;
	--os-motion-cinematic: 600ms;
	--os-ease-standard: cubic-bezier(0.2, 0, 0, 1);
	--os-ease-emphasized: cubic-bezier(0.05, 0.7, 0.1, 1);
	/* Legacy transition tokens map onto the motion system */
	--os-transition-fast: var(--os-motion-fast) var(--os-ease-standard);
	--os-transition-normal: var(--os-motion-base) var(--os-ease-standard);
	--os-transition-slow: var(--os-motion-slow) var(--os-ease-standard);

	/* Z layers */
	--os-z-nav: 100;
	--os-z-sheet: 600;
	--os-z-dialog: 700;
	--os-z-toast: 900;

	/* Safe area */
	--os-safe-top: env(safe-area-inset-top, 0px);
	--os-safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* ── Light — "Ink on warm paper" ──
 * The third selector re-anchors the palette at the binary
 * data-theme="light|dark" divs stamped by AppLayout/ReaderLayout/GateLayout:
 * themes/default.css matches those divs with bare [data-theme="…"] blocks and
 * would otherwise re-declare the v1 palette BELOW the v2 html-level override
 * (v1 has the same semantics: shell interiors always run the default palette
 * for the mode; named themes reskin via class-targeted chrome rules). */
html[data-ui="v2"],
html[data-ui="v2"][data-theme-mode="light"],
html[data-ui="v2"] [data-theme="light"] {
	--os-primary: #6D4AFF;
	--os-primary-hover: #5B3AE6;
	--os-primary-light: #EDE8FF;
	--os-primary-dark: #4C2FD6;
	--os-gradient-start: #6D4AFF;
	--os-gradient-end: #3E1F9E;
	--os-gradient: linear-gradient(135deg, var(--os-gradient-start), var(--os-gradient-end));
	--os-accent: #0E9F85;
	--os-accent-hover: #0C8A73;

	--os-background: #F7F4EE;
	--os-surface: #FFFFFF;
	--os-surface-variant: #F1EDE4;
	--os-surface-elevated: #FFFFFF;

	--os-text-primary: #17141F;
	--os-text-secondary: #4A4458;
	--os-text-tertiary: #6E6880;
	--os-text-on-primary: #FFFFFF;
	--os-text-on-dark: #F2EFF8;

	--os-border: #E4DFD3;
	--os-border-light: #EFEBE1;
	--os-border-focus: #6D4AFF;

	--os-success: #0E7C68;
	--os-success-light: #DFF7F1;
	--os-error: #CC3B3B;
	--os-error-light: #FCE8E8;
	--os-warning: #9A6B00;
	--os-warning-light: #FBF1DC;
	--os-info: #2F6BE4;

	--os-star-filled: #E8A33D;
	--os-star-empty: #D9D3C7;
	--os-tab-active: var(--os-primary);
	--os-tab-inactive: var(--os-text-tertiary);
	--os-overlay: rgba(13, 11, 22, 0.55);
	--os-overlay-light: rgba(13, 11, 22, 0.35);

	--os-shadow-sm: 0 1px 2px rgba(23, 20, 31, 0.05), 0 2px 8px rgba(23, 20, 31, 0.05);
	--os-shadow-md: 0 2px 4px rgba(23, 20, 31, 0.06), 0 8px 24px rgba(23, 20, 31, 0.09);
	--os-shadow-lg: 0 4px 8px rgba(23, 20, 31, 0.07), 0 16px 48px rgba(23, 20, 31, 0.14);

	/* Glass (chrome only — never on feed items) */
	--os-glass-bg: rgba(255, 255, 255, 0.62);
	--os-glass-bg-strong: rgba(255, 255, 255, 0.78);
	--os-glass-blur: 16px;
	--os-glass-border: rgba(23, 20, 31, 0.08);
	--os-glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.6);

	/* Elevation & glow */
	--os-elevation-1: var(--os-shadow-sm);
	--os-elevation-2: var(--os-shadow-md);
	--os-elevation-3: var(--os-shadow-lg);
	--os-elevation-4: 0 8px 16px rgba(23, 20, 31, 0.10), 0 32px 80px rgba(23, 20, 31, 0.18);
	--os-glow-primary: 0 8px 24px rgba(109, 74, 255, 0.18);
	--os-glow-accent: 0 8px 24px rgba(14, 159, 133, 0.18);

	--os-focus-ring-color: #6D4AFF;

	color-scheme: light;
}

/* ── Dark — "Cinematic night" (atmosphere, not inversion) ── */
html[data-ui="v2"][data-theme-mode="dark"],
html[data-ui="v2"][data-theme="dark"],
html[data-ui="v2"] [data-theme="dark"] {
	--os-primary: #8B70FF;
	--os-primary-hover: #9D85FF;
	--os-primary-light: #2A2344;
	--os-primary-dark: #6D4AFF;
	--os-gradient-start: #8B70FF;
	--os-gradient-end: #4C2FD6;
	--os-accent: #2BD4B4;
	--os-accent-hover: #4BE0C4;

	--os-background: #0F0D18;
	--os-surface: #171422;
	--os-surface-variant: #1E1A2C;
	--os-surface-elevated: #231E33;

	--os-text-primary: #F2EFF8;
	--os-text-secondary: #B9B2CC;
	--os-text-tertiary: #8D86A6;
	--os-text-on-primary: #14102A;
	--os-text-on-dark: #F2EFF8;

	--os-border: #2C2740;
	--os-border-light: #241F36;
	--os-border-focus: #8B70FF;

	--os-success: #2BD4B4;
	--os-success-light: #123B33;
	--os-error: #FF7A70;
	--os-error-light: #3C1A20;
	--os-warning: #FFB94D;
	--os-warning-light: #3A2B12;
	--os-info: #6E9BFF;

	--os-star-filled: #FFB94D;
	--os-star-empty: #3A3450;
	--os-tab-active: var(--os-primary);
	--os-tab-inactive: var(--os-text-tertiary);
	--os-overlay: rgba(6, 5, 12, 0.72);
	--os-overlay-light: rgba(6, 5, 12, 0.5);

	--os-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.3);
	--os-shadow-md: 0 2px 4px rgba(0, 0, 0, 0.45), 0 8px 24px rgba(0, 0, 0, 0.4);
	--os-shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.5), 0 16px 48px rgba(0, 0, 0, 0.5);

	--os-glass-bg: rgba(23, 20, 34, 0.55);
	--os-glass-bg-strong: rgba(23, 20, 34, 0.72);
	--os-glass-blur: 16px;
	--os-glass-border: rgba(255, 255, 255, 0.08);
	--os-glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.05);

	--os-elevation-1: var(--os-shadow-sm);
	--os-elevation-2: var(--os-shadow-md);
	--os-elevation-3: var(--os-shadow-lg);
	--os-elevation-4: 0 8px 16px rgba(0, 0, 0, 0.55), 0 32px 80px rgba(0, 0, 0, 0.6);
	--os-glow-primary: 0 0 24px rgba(139, 112, 255, 0.35);
	--os-glow-accent: 0 0 24px rgba(43, 212, 180, 0.3);

	--os-focus-ring-color: #8B70FF;

	color-scheme: dark;
}

/* ── Focus visibility (global, v2 only) ── */
html[data-ui="v2"] :focus-visible {
	outline: 2px solid var(--os-focus-ring-color);
	outline-offset: 2px;
}

/* ── Reduced motion: strip decorative motion entirely ── */
@media (prefers-reduced-motion: reduce) {
	html[data-ui="v2"] *,
	html[data-ui="v2"] *::before,
	html[data-ui="v2"] *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ═══ v2 base component styles ═══ */

/* Editorial headings */
html[data-ui="v2"] h1,
html[data-ui="v2"] h2 {
	font-family: var(--os-font-display);
	font-weight: 600;
	letter-spacing: -0.015em;
}
html[data-ui="v2"] h1 { font-size: var(--os-text-display-lg); line-height: 1.15; }
html[data-ui="v2"] h2 { font-size: var(--os-text-display-md); line-height: 1.2; }

/* Buttons — pill, 44px min target, motion + glow */
html[data-ui="v2"] .os-btn {
	min-height: 44px;
	padding: 10px 22px;
	border-radius: var(--os-radius-full, 9999px);
	transition: transform var(--os-motion-fast) var(--os-ease-standard),
		box-shadow var(--os-motion-base) var(--os-ease-standard),
		background-color var(--os-motion-fast) var(--os-ease-standard),
		color var(--os-motion-fast) var(--os-ease-standard);
}
html[data-ui="v2"] .os-btn-primary {
	background: var(--os-gradient);
	color: var(--os-text-on-primary);
	box-shadow: var(--os-elevation-1);
}
@media (hover: hover) and (pointer: fine) {
	html[data-ui="v2"] .os-btn-primary:hover {
		transform: translateY(-1px);
		box-shadow: var(--os-glow-primary);
	}
	html[data-ui="v2"] .os-btn:active { transform: translateY(0); }
}
html[data-ui="v2"] .os-btn-outline {
	background: transparent;
	border: 1px solid var(--os-border);
	color: var(--os-text-primary);
}
html[data-ui="v2"] .os-btn-ghost {
	background: transparent;
	color: var(--os-text-secondary);
}

/* Inputs — 44px, calm borders, focus ring via border + soft glow */
html[data-ui="v2"] .os-input {
	min-height: 44px;
	background: var(--os-surface);
	border: 1px solid var(--os-border);
	border-radius: var(--os-radius-md);
	color: var(--os-text-primary);
	transition: border-color var(--os-motion-fast) var(--os-ease-standard),
		box-shadow var(--os-motion-base) var(--os-ease-standard);
}
html[data-ui="v2"] .os-input:focus {
	border-color: var(--os-border-focus);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--os-border-focus) 18%, transparent);
	outline: none;
}
html[data-ui="v2"] .os-label { color: var(--os-text-secondary); }

/* Cards / surfaces */
html[data-ui="v2"] .os-card {
	background: var(--os-surface);
	border: 1px solid var(--os-border-light);
	border-radius: var(--os-radius-lg);
	box-shadow: var(--os-elevation-1);
}

/* Route transition — soft cinematic rise.
   NO fill-mode on purpose: with `forwards`, Chromium retains the LAST
   keyframe as an interpolated identity matrix (not the `none` keyword),
   which keeps .os-page-enter a containing block for position:fixed
   descendants forever and traps fixed overlays (e.g. the auth backdrop)
   in its small box — verified empirically in the W7 smoke. Without a
   fill-mode the element reverts to its transform-free base style at
   animationend, releasing the containing block; the final keyframe
   matches the base state so the handoff is visually seamless. */
html[data-ui="v2"] .os-page-enter {
	animation: osPageInV2 var(--os-motion-slow) var(--os-ease-emphasized);
}
@keyframes osPageInV2 {
	from { opacity: 0; transform: translateY(12px); }
	to { opacity: 1; transform: none; }
}

/* Skeleton shimmer stays token-driven */
html[data-ui="v2"] .os-skeleton {
	background: var(--os-surface-variant);
	border-radius: var(--os-radius-md);
}