/*--------------------------------------------------------------
Navel World Submissions — Foundation
Design tokens (custom properties), base resets and the type ramp.
Source: design-reference/Navel World Design System.html
--------------------------------------------------------------*/

:root {
	/* Surfaces */
	--color-page-bg: #0a0908;
	--color-base: #0e0d0c;
	--color-surface: #171512;
	--color-surface-hover: #2a2621;
	--color-raised: #201d19;
	--color-well: #141210;
	--color-row-hover: #1a1713;

	/* Borders */
	--color-border-faint: #211c18;
	--color-border-subtle: #241f1b;
	--color-border: #322d27;
	--color-border-strong: #423b33;
	--color-border-hover: #544b41;
	--color-border-dashed: #3a332c;

	/* Ink */
	--color-ink-primary: #f2ece2;
	--color-ink-strong: #ece6dd;
	--color-ink-body: #c9c0b5;
	--color-ink-muted: #a69d92;
	--color-ink-faint: #6d655c;
	--color-ink-disabled: #524b44;

	/* Accent */
	--color-accent: #cf9484;
	--color-accent-hover: #dca699;
	--color-accent-active: #bd7f6f;
	--color-accent-ink: #201512;
	--color-accent-on-dark: #e7b8ac;
	--color-accent-soft-bg: rgba(207, 148, 132, 0.13);
	--color-accent-soft-border: rgba(207, 148, 132, 0.4);
	--color-accent-focus-ring: rgba(207, 148, 132, 0.16);

	/* Status — each status is a tone, not a fixed vocabulary. The same tone
	   is reused for both the chapter workflow (Draft / Under review / Published)
	   and the story rollup (On Hiatus / Ongoing / Complete). */
	--color-status-positive: #85a877;
	--color-status-positive-bg: rgba(133, 168, 119, 0.13);
	--color-status-positive-border: rgba(133, 168, 119, 0.3);
	--color-status-positive-ink: #a9c79c;

	--color-status-active: #d0a25c;
	--color-status-active-bg: rgba(208, 162, 92, 0.13);
	--color-status-active-border: rgba(208, 162, 92, 0.3);
	--color-status-active-ink: #dcb779;

	--color-status-neutral: #8c837b;
	--color-status-neutral-bg: rgba(154, 144, 136, 0.12);
	--color-status-neutral-border: rgba(154, 144, 136, 0.26);
	--color-status-neutral-ink: #b0a79e;

	/* Fourth tone, added for the chapter review workflow's "Rejected" state
	   — qualitatively different from the other three (all in-progress),
	   so it needed its own hue rather than reusing neutral. Muted brick/
	   terracotta red: same medium-saturation, medium-lightness family as
	   the three tones above (not a saturated alarm red), hue tuned closer
	   to true red (~4°) than --color-accent's pink-salmon (~12°) so the
	   two stay visually distinct. Shown to the user before this was wired
	   up anywhere. */
	--color-status-danger: #c1554d;
	--color-status-danger-bg: rgba(193, 85, 77, 0.13);
	--color-status-danger-border: rgba(193, 85, 77, 0.3);
	--color-status-danger-ink: #dea5a1;

	/* Type */
	--font-serif: 'Lora', Georgia, serif;
	--font-sans: 'Geist', system-ui, sans-serif;

	/*
	 * Glyph-level fallback for user-generated story content only (chapter
	 * title/body, story title/summary — see the matching selectors in
	 * components.css) — NOT a language switch, no JS involved. Lora simply
	 * has no glyphs for Devanagari/Bengali/Malayalam/Tamil/Telugu, so the
	 * browser's own font-family fallback silently skips to the first Noto
	 * Serif variant that actually covers whatever script the author typed,
	 * per character, same line. Deliberately not merged into --font-serif
	 * itself: that variable also drives headings/UI chrome that should
	 * always render in Lora and never silently substitute a fallback font.
	 */
	--font-content: 'Lora', 'Noto Serif Devanagari', 'Noto Serif Bengali', 'Noto Serif Malayalam', 'Noto Serif Tamil', 'Noto Serif Telugu', Georgia, serif;

	/* Spacing scale */
	--space-2xs: 4px;
	--space-xs: 8px;
	--space-sm: 12px;
	--space-md: 16px;
	--space-lg: 24px;
	--space-xl: 32px;
	--space-2xl: 48px;
	--space-3xl: 64px;

	/* Radius scale */
	--radius-sm: 4px;
	--radius-md: 8px;
	--radius-lg: 12px;
	--radius-xl: 16px;
	--radius-pill: 999px;
	--radius-badge: 6px;

	/* Motion */
	--ease-standard: all 0.18s ease;
	--ease-fast: all 0.16s ease;
}

/*--------------------------------------------------------------
Base
--------------------------------------------------------------*/

/*
 * This theme is dark-only — no light variant exists anywhere. Declaring
 * that explicitly (rather than leaving browsers to assume `light`, the
 * default) is what makes native, non-CSS-styleable UI — the OS-drawn
 * autofill panel, spell-check underlines, the default form-control focus
 * ring in some browsers — render for a dark surface instead of a light
 * one; without it those bits of native chrome can visually clash even
 * though every author-styled element is already correct.
 */
:root {
	color-scheme: dark;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	background-color: var(--color-page-bg);
	background-image: radial-gradient(120% 60% at 50% -10%, rgba(207, 148, 132, 0.06), rgba(10, 9, 8, 0) 60%);
	background-attachment: fixed;
	color: var(--color-ink-strong);
	font-family: var(--font-sans);
	-webkit-font-smoothing: antialiased;
}

::selection {
	background: rgba(207, 148, 132, 0.28);
	color: #fff;
}

input::placeholder,
textarea::placeholder {
	color: var(--color-ink-faint);
}

/*
 * `color: inherit` is the fix here, not just `font-family`. Browsers'
 * own UA stylesheets give form controls their own default text color —
 * it does NOT inherit from the page by default the way most other
 * properties do — so any input/textarea without its own explicit
 * `color` (a class that didn't get applied, a future field added without
 * one) silently renders near-black text on this theme's dark surfaces
 * instead of picking up the page's ink color. This theme's own
 * `.field__input`/`.tag-input__field`/etc. classes already set their own
 * `color` and are unaffected either way (class specificity beats this
 * type-selector rule) — this is the safety net for anything that isn't
 * one of those.
 *
 * It's also the fix for a latent conflict: style.css (Underscores'
 * unmodified base) still carries its original light-theme rule —
 * `body, button, input, select, optgroup, textarea { color: #404040; }`
 * — from before this theme became a dark, single-palette app. That rule
 * was never reachable through any of this theme's own component classes
 * (class specificity already beat it), but it was still the value any
 * *unclassed* form control would have silently fallen back to. This rule
 * loads after style.css and neutralizes it at equal specificity.
 */
input,
textarea,
button,
select {
	font-family: inherit;
	color: inherit;
}

a {
	color: inherit;
}

a:visited {
	color: inherit;
}

.nw-scroll::-webkit-scrollbar {
	width: 10px;
}

/*--------------------------------------------------------------
Type ramp
--------------------------------------------------------------*/

.nw-display {
	margin: 0;
	font-family: var(--font-serif);
	font-weight: 500;
	font-size: 44px;
	line-height: 1.1;
	letter-spacing: -0.01em;
	color: var(--color-ink-primary);
}

.nw-title {
	margin: 0;
	font-family: var(--font-serif);
	font-weight: 500;
	font-size: 30px;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--color-ink-primary);
}

@media (max-width: 600px) {
	.nw-title {
		font-size: 26px;
	}
}

.nw-heading {
	margin: 0;
	font-family: var(--font-serif);
	font-weight: 500;
	font-size: 22px;
	line-height: 1.3;
	color: var(--color-ink-strong);
}

.nw-prose {
	margin: 0;
	font-family: var(--font-serif);
	font-size: 17px;
	line-height: 1.75;
	color: var(--color-ink-body);
}

.nw-prose--lede {
	font-style: italic;
	color: var(--color-ink-muted);
}

.nw-eyebrow {
	font-family: var(--font-sans);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--color-accent);
}

.nw-label {
	font-family: var(--font-sans);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.06em;
	color: var(--color-ink-muted);
}

.nw-caption {
	font-family: var(--font-sans);
	font-size: 13px;
	line-height: 1.5;
	color: var(--color-ink-muted);
}