/*
 * KlenWriter Theme v2 — design tokens.
 *
 * Single source of values (docs/21-css-token-architecture.md). Colours live in
 * BOTH theme blocks — never define a colour token in only one theme (docs/10 §2,
 * QA docs/31 §2). Components reference these tokens only; no raw hex in blocks.
 *
 * Layout:
 *   1. :root                      — theme-agnostic: radii, motion, z, widths, derived status tints
 *   2. [data-kwt-theme="dark"]    — dark palette, shadows, glow, reading + glass surfaces
 *   3. [data-kwt-theme="light"]   — light palette (own values, not an inversion — canon §1.1)
 *   4. [data-kwt-reading-bg=*]    — reading-surface presets, independent of site theme (docs/10 §5)
 *   5. [data-kwt-reading-text]    — reading contrast preset
 */

/* ------------------------------------------------------------------ */
/* 1. Theme-agnostic structure                                        */
/* ------------------------------------------------------------------ */
:root {
	/* Font stacks (canon §6.1 — system sans for UI). */
	--kwt-font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--kwt-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	--kwt-tracking-tight: -0.011em;

	/* Radii (canon §8). */
	--kwt-radius-xs: 0.375rem;   /* 6px  */
	--kwt-radius-sm: 0.5rem;     /* 8px  — compact rows, small controls */
	--kwt-radius-md: 0.625rem;   /* 10px — fields, small cards */
	--kwt-radius-lg: 0.875rem;   /* 14px — main cards, panels */
	--kwt-radius-xl: 1.5rem;     /* 24px — large framed containers */
	--kwt-radius-2xl: 2rem;
	--kwt-radius-pill: 999px;

	/* Motion (canon §28 — 160–220ms, calm). */
	--kwt-ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
	--kwt-transition-fast: 160ms;
	--kwt-transition-normal: 200ms;
	--kwt-transition-slow: 280ms;
	--kwt-lift-card: -2px;
	--kwt-lift-chip: -1px;

	/* Z-index ladder. */
	--kwt-z-header: 100;
	--kwt-z-back-to-top: 200;
	--kwt-z-reading-controls: 300;
	--kwt-z-distraction-exit: 400;
	--kwt-z-overlay: 500;
	--kwt-z-tooltip: 600;

	/* Layout widths (canon §9.2). */
	--kwt-wide-width: 76rem;
	--kwt-content-width: 72rem;
	--kwt-page-width: 70rem;
	--kwt-reading-width: 44rem;       /* 38–48rem comfortable column */
	--kwt-reading-width-wide: 60rem;  /* wide reading mode */
	--kwt-text-max-width: 68ch;

	/* Derived status tints (reference per-theme base set below). */
	--kwt-color-success-soft: color-mix(in srgb, var(--kwt-color-success) 14%, transparent);
	--kwt-color-success-border: color-mix(in srgb, var(--kwt-color-success) 38%, transparent);
	--kwt-color-info-soft: color-mix(in srgb, var(--kwt-color-info) 14%, transparent);
	--kwt-color-info-border: color-mix(in srgb, var(--kwt-color-info) 38%, transparent);
	--kwt-color-warning-soft: color-mix(in srgb, var(--kwt-color-warning) 16%, transparent);
	--kwt-color-warning-border: color-mix(in srgb, var(--kwt-color-warning) 40%, transparent);
	--kwt-color-error-soft: color-mix(in srgb, var(--kwt-color-error) 15%, transparent);
	--kwt-color-error-border: color-mix(in srgb, var(--kwt-color-error) 40%, transparent);
	--kwt-color-danger-soft: color-mix(in srgb, var(--kwt-color-danger) 15%, transparent);
	--kwt-color-danger-border: color-mix(in srgb, var(--kwt-color-danger) 42%, transparent);
}

/* ------------------------------------------------------------------ */
/* 2. Dark theme — primary, atmospheric (canon §3.3, §4.1)            */
/* ------------------------------------------------------------------ */
:root[data-kwt-theme="dark"] {
	color-scheme: dark;

	/* Surfaces */
	--kwt-color-background: #0b0d13;
	--kwt-color-background-soft: #111620;
	--kwt-color-surface: #151b25;
	--kwt-color-surface-muted: #1c2431;
	--kwt-color-surface-raised: #222c3a;
	--kwt-color-card: var(--kwt-color-surface);
	--kwt-color-tile: #10151e;

	/* Text */
	--kwt-color-foreground: rgba(242, 246, 250, 0.93);
	--kwt-color-foreground-strong: #f8fbff;
	--kwt-color-muted: rgba(220, 229, 238, 0.66);
	--kwt-color-faint: rgba(220, 229, 238, 0.44);

	/* Borders */
	--kwt-color-border: rgba(220, 229, 238, 0.12);
	--kwt-color-border-strong: rgba(220, 229, 238, 0.22);

	/* Cold accent — control (canon §1.3) */
	--kwt-color-primary: #6eb7ff;
	--kwt-color-primary-hover: #91c9ff;
	--kwt-color-primary-strong: #b6dcff;
	--kwt-color-on-primary: #06121f;

	/* Warm accent — literature, and world roles */
	--kwt-color-manuscript: #d8b978;
	--kwt-color-cycle: #9fb0e8;
	--kwt-color-classified: #c2b2d8;

	/* Paper layer (canon §4 — warm even in dark) */
	--kwt-color-paper: #f3ecdc;
	--kwt-color-ink: #1f2630;
	--kwt-color-ink-muted: #6e6657;

	/* Status base (canon §4.3) */
	--kwt-color-success: #69d79a;
	--kwt-color-info: #7bbdff;
	--kwt-color-warning: #e4bd6d;
	--kwt-color-error: #f2847e;
	--kwt-color-danger: #f0736d;

	/* Shadows (deeper in dark) */
	--kwt-shadow-subtle: 0 1px 2px rgba(0, 0, 0, 0.4);
	--kwt-shadow-card: 0 6px 20px rgba(0, 0, 0, 0.45);
	--kwt-shadow-hover: 0 14px 36px rgba(0, 0, 0, 0.55);
	--kwt-shadow-button: 0 6px 18px rgba(40, 110, 200, 0.35);
	--kwt-shadow-focus: 0 0 0 3px color-mix(in srgb, var(--kwt-color-primary) 55%, transparent);

	/* Controlled glow (canon §8 — never on text) */
	--kwt-glow-soft: 0 0 0 1px color-mix(in srgb, var(--kwt-color-primary) 22%, transparent);
	--kwt-glow-card: 0 10px 30px color-mix(in srgb, var(--kwt-color-primary) 16%, transparent);
	--kwt-glow-legendary: 0 0 28px color-mix(in srgb, var(--kwt-color-manuscript) 40%, transparent);
	--kwt-glow-diamond: 0 0 30px color-mix(in srgb, var(--kwt-color-manuscript) 30%, transparent), 0 0 18px color-mix(in srgb, var(--kwt-color-primary-strong) 26%, transparent);
	--kwt-glow-menu: 0 18px 50px rgba(0, 0, 0, 0.55);
	--kwt-glow-footer: 0 -1px 40px color-mix(in srgb, var(--kwt-color-primary) 8%, transparent);

	/* Glass + scrim (canon §2.4) */
	--kwt-glass-bg: color-mix(in srgb, var(--kwt-color-surface) 78%, transparent);
	--kwt-glass-border: rgba(220, 229, 238, 0.14);
	--kwt-scrim: rgba(4, 6, 11, 0.66);

	/* Reading surface defaults (overridden by presets, docs/10 §5) */
	--kwt-reading-bg: #12161d;
	--kwt-reading-ink: rgba(238, 242, 247, 0.9);
	--kwt-reading-ink-muted: rgba(214, 224, 234, 0.6);
	--kwt-reading-edge: rgba(220, 229, 238, 0.1);
}

/* ------------------------------------------------------------------ */
/* 3. Light theme — daytime manuscript (canon §3.4, §4.2)            */
/* ------------------------------------------------------------------ */
:root[data-kwt-theme="light"] {
	color-scheme: light;

	/* Surfaces */
	--kwt-color-background: #f4f6f8;
	--kwt-color-background-soft: #ebeef3;
	--kwt-color-surface: #ffffff;
	--kwt-color-surface-muted: #eef2f6;
	--kwt-color-surface-raised: #f8fafc;
	--kwt-color-card: var(--kwt-color-surface);
	--kwt-color-tile: #eef1f5;

	/* Text */
	--kwt-color-foreground: #1b232d;
	--kwt-color-foreground-strong: #101820;
	--kwt-color-muted: #5f6c79;
	--kwt-color-faint: #8b96a3;

	/* Borders */
	--kwt-color-border: #dfe5ec;
	--kwt-color-border-strong: #c7d0da;

	/* Cold accent — control */
	--kwt-color-primary: #276fb7;
	--kwt-color-primary-hover: #1f5d99;
	--kwt-color-primary-strong: #174a7d;
	--kwt-color-on-primary: #ffffff;

	/* Warm accent — literature, and world roles */
	--kwt-color-manuscript: #a7792f;
	--kwt-color-cycle: #5560b0;
	--kwt-color-classified: #6f5f86;

	/* Paper layer */
	--kwt-color-paper: #fffaf0;
	--kwt-color-ink: #1e252d;
	--kwt-color-ink-muted: #766d5d;

	/* Status base (canon §4.3) */
	--kwt-color-success: #287848;
	--kwt-color-info: #276fb7;
	--kwt-color-warning: #91691f;
	--kwt-color-error: #b42318;
	--kwt-color-danger: #b42318;

	/* Shadows (soft in light) */
	--kwt-shadow-subtle: 0 1px 2px rgba(20, 30, 45, 0.06);
	--kwt-shadow-card: 0 6px 20px rgba(20, 30, 45, 0.08);
	--kwt-shadow-hover: 0 14px 36px rgba(20, 30, 45, 0.12);
	--kwt-shadow-button: 0 6px 16px rgba(39, 111, 183, 0.22);
	--kwt-shadow-focus: 0 0 0 3px color-mix(in srgb, var(--kwt-color-primary) 35%, transparent);

	/* Controlled glow (deliberately gentler in light — canon §1.1) */
	--kwt-glow-soft: 0 0 0 1px color-mix(in srgb, var(--kwt-color-primary) 18%, transparent);
	--kwt-glow-card: 0 10px 28px rgba(20, 30, 45, 0.1);
	--kwt-glow-legendary: 0 0 22px color-mix(in srgb, var(--kwt-color-manuscript) 26%, transparent);
	--kwt-glow-diamond: 0 0 22px color-mix(in srgb, var(--kwt-color-manuscript) 22%, transparent), 0 0 14px color-mix(in srgb, var(--kwt-color-primary) 20%, transparent);
	--kwt-glow-menu: 0 18px 44px rgba(20, 30, 45, 0.14);
	--kwt-glow-footer: 0 -1px 32px color-mix(in srgb, var(--kwt-color-primary) 6%, transparent);

	/* Glass + scrim */
	--kwt-glass-bg: color-mix(in srgb, var(--kwt-color-surface) 80%, transparent);
	--kwt-glass-border: rgba(20, 30, 45, 0.1);
	--kwt-scrim: rgba(20, 30, 45, 0.42);

	/* Reading surface defaults */
	--kwt-reading-bg: #ffffff;
	--kwt-reading-ink: #1b232d;
	--kwt-reading-ink-muted: #5f6c79;
	--kwt-reading-edge: #e4e9ef;
}

/* ------------------------------------------------------------------ */
/* 4. Reading-surface presets — independent of site theme (docs/10 §5)*/
/* ------------------------------------------------------------------ */
:root[data-kwt-reading-bg="paper"] {
	--kwt-reading-bg: var(--kwt-color-paper);
	--kwt-reading-ink: var(--kwt-color-ink);
	--kwt-reading-ink-muted: var(--kwt-color-ink-muted);
	--kwt-reading-edge: color-mix(in srgb, var(--kwt-color-ink) 14%, transparent);
}

:root[data-kwt-reading-bg="light"] {
	--kwt-reading-bg: #ffffff;
	--kwt-reading-ink: #1b232d;
	--kwt-reading-ink-muted: #5f6c79;
	--kwt-reading-edge: #e4e9ef;
}

:root[data-kwt-reading-bg="warm"] {
	--kwt-reading-bg: #f6f1e8;
	--kwt-reading-ink: #2a2922;
	--kwt-reading-ink-muted: #6f6755;
	--kwt-reading-edge: #e6ddcd;
}

:root[data-kwt-reading-bg="dark"] {
	--kwt-reading-bg: #12161d;
	--kwt-reading-ink: rgba(238, 242, 247, 0.9);
	--kwt-reading-ink-muted: rgba(214, 224, 234, 0.6);
	--kwt-reading-edge: rgba(220, 229, 238, 0.1);
}

/* 5. Reading contrast preset (canon §24 — high contrast).
 * Theme-independent and direction-safe: muted reading text is promoted to full
 * ink strength, raising legibility against any reading-bg preset without ever
 * reducing contrast (a dark preset under a light site theme stays correct).
 * Fine-grained tuning lands with the reader toolbar (docs/10 §7). */
:root[data-kwt-reading-text="high"] {
	--kwt-reading-ink-muted: var(--kwt-reading-ink);
}

/* ------------------------------------------------------------------ */
/* 6. Reading typography & measure — reader-controlled                 */
/*    (canon §6.2, §24; docs/10 §7). Theme-agnostic defaults + presets.*/
/* ------------------------------------------------------------------ */
:root {
	--kwt-reading-font-size: 1.1875rem; /* ~19px, within canon §6.2 18–21 */
	--kwt-reading-leading: 1.75;        /* within canon §6.2 1.65–1.85 */
	--kwt-reading-measure: var(--kwt-reading-width);
}

/* Text size (canon §24 — 16–25px). */
:root[data-kwt-reading-size="s"]  { --kwt-reading-font-size: 1rem; }      /* 16px */
:root[data-kwt-reading-size="m"]  { --kwt-reading-font-size: 1.1875rem; } /* 19px */
:root[data-kwt-reading-size="l"]  { --kwt-reading-font-size: 1.3125rem; } /* 21px */
:root[data-kwt-reading-size="xl"] { --kwt-reading-font-size: 1.5rem; }    /* 24px */

/* Line-height (canon §24 — compact / comfortable / roomy). */
:root[data-kwt-reading-leading="compact"] { --kwt-reading-leading: 1.62; }
:root[data-kwt-reading-leading="cozy"]    { --kwt-reading-leading: 1.75; }
:root[data-kwt-reading-leading="roomy"]   { --kwt-reading-leading: 1.9; }

/* Column width (canon §9.2 — narrow / normal / wide / full). */
:root[data-kwt-reading-width="narrow"] { --kwt-reading-measure: 38rem; }
:root[data-kwt-reading-width="normal"] { --kwt-reading-measure: var(--kwt-reading-width); }
:root[data-kwt-reading-width="wide"]   { --kwt-reading-measure: var(--kwt-reading-width-wide); }
:root[data-kwt-reading-width="full"]   { --kwt-reading-measure: min(100%, var(--kwt-wide-width)); }