/*
 * MV+ design tokens, following the MV+ brand guidelines (version 2.0,
 * November 2026): the three brand colours and their official tonal ramps,
 * brand-tinted surfaces, and text colours chosen for contrast.
 * The theme comes from the reader's device until they pick one (setup.php);
 * [data-theme="light"] (or .mv-light on a subtree) switches to light.
 *
 * Fonts are self-hosted from assets/fonts/ (faces listed in mvplus_font_faces()).
 * Each stack falls back to system faces if a file is missing.
 */

:root {
	/* Brand colours. Roughly 60/30/10 across coloured elements: Ocean leads,
	   Lagoon supports, Mint is a small accent only (never text on light, never
	   body text, never a field behind text). */
	--mv-blue: #008CD1;  /* Ocean Blue */
	--mv-teal: #00C9D8;  /* Lagoon Cyan */
	--mv-cyan: #00FFDD;  /* Mint Aqua */
	/* Gradients are for backgrounds and the logo, always Ocean → Lagoon → Mint;
	   never on text, data bars or buttons. */
	--mv-gradient: linear-gradient(90deg, #008CD1 0%, #00C9D8 50%, #00FFDD 100%);
	--mv-gradient-diag: linear-gradient(135deg, #008CD1 0%, #00C9D8 50%, #00FFDD 100%);
	--mv-gradient-soft: linear-gradient(90deg, rgba(0, 140, 209, .16) 0%, rgba(0, 201, 216, .16) 50%, rgba(0, 255, 221, .16) 100%);

	/* Official ramps: 100–200 tints, 300–400 fills, 500 core, 600 text-safe on
	   light, 700 deepest. */
	--ocean-100: #E8F6FC; --ocean-200: #BDE7F6; --ocean-300: #7CCBEA; --ocean-400: #33A8DE;
	--ocean-500: #008CD1; --ocean-600: #006899; --ocean-700: #00334E;
	--lagoon-100: #E8FAFC; --lagoon-200: #B9F0F5; --lagoon-300: #79E2EC; --lagoon-400: #32D3E1;
	--lagoon-500: #00C9D8; --lagoon-600: #0095A4; --lagoon-700: #00464E;
	--mint-100: #E5FFFA; --mint-200: #B5FFF2; --mint-300: #75FFE9; --mint-400: #32FFE0;
	--mint-500: #00FFDD; --mint-600: #008E7E; --mint-700: #005F56;

	/* Older names kept as aliases of the official ramps. */
	--blue-100: var(--ocean-100); --blue-200: var(--ocean-200); --blue-300: var(--ocean-300); --blue-400: var(--ocean-400);
	--blue-500: var(--ocean-500); --blue-600: var(--ocean-600); --blue-700: var(--ocean-700);
	--cyan-100: var(--mint-100); --cyan-200: var(--mint-200); --cyan-300: var(--mint-300); --cyan-400: var(--mint-400);
	--cyan-500: var(--mint-500); --cyan-600: var(--lagoon-500);

	/* Ink: the brand's deep blue-black neutrals (dark surfaces). */
	--ink-1000: #050F17; --ink-900: #08151F; --ink-800: #0B1A26; --ink-700: #0F2230;
	--ink-600: #1A3344; --ink-500: #2B4A5E; --ink-400: #3E6178; --ink-300: #557A91;
	--grey-500: #546E7A; --grey-400: #8FA6B5; --grey-300: #AFC0CB; --grey-200: #C3D1DA;
	--grey-100: #D3E3E9; --grey-50: #F3FAFC; --white: #FFFFFF;

	/* States share the data meaning colours: green up, coral down. */
	--success-500: #87BF5E; --warning-500: #FFC93C; --danger-500: #D9604C; --live-500: #D9604C;

	/* Semantic aliases (dark) */
	--surface-page: #08151F;
	--surface-sunken: #050F17;
	--surface-card: #0F2230;
	--surface-raised: #1A3344;
	--surface-overlay: rgba(8, 21, 31, .86);
	--surface-hover: rgba(195, 209, 218, .06);
	--surface-active: rgba(195, 209, 218, .1);
	--surface-placeholder: #1A3344;

	--text-strong: #F5F8FA;
	--text-body: #C3D1DA;
	--text-muted: #8FA6B5;
	--text-faint: #8FA6B5;
	/* Coloured text on dark is Lagoon Cyan (9.1:1); Mint is kept for markers. */
	--text-accent: var(--lagoon-500);
	--text-link: var(--lagoon-500);
	--text-link-hover: var(--lagoon-300);
	--text-on-accent: #08151F;

	/* Filled buttons, and the small Mint marker (active tab, live dot). */
	--action-fill: var(--lagoon-500);
	--action-fill-hover: var(--lagoon-400);
	--on-action-fill: #08151F;
	--marker: var(--mint-500);

	--border-hairline: rgba(195, 209, 218, .1);
	--border-subtle: #2B4A5E;
	--border-strong: #3E6178;
	--focus-ring: var(--lagoon-500);

	/* Type (brand guidelines 2.0): English headlines, titles and big numbers
	   Roboto; body, navigation, buttons and interface Public Sans; Ciutadella
	   Rounded only for brand marks such as category labels and overlines.
	   Dhivehi MV Waheed / MV Faseyha. */
	--font-head: "Roboto", "Helvetica Neue", Arial, sans-serif;
	--font-display: "Ciutadella Rounded", "Nunito", ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--font-body: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	/* MV Waheed / MV Faseyha are limited to Thaana by unicode-range (setup.php).
	   Latin faces come next, and system Thaana fonts (Faruma etc., which carry
	   serif Latin) only after them, so they never catch Latin text or digits. */
	--font-dv-display: "MV Waheed", "MV Faseyha", "Ciutadella Rounded", ui-rounded, system-ui, -apple-system, "Segoe UI", Roboto, "Faruma", "Noto Sans Thaana", "MV Boli", sans-serif;
	--font-dv-body: "MV Faseyha", "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Faruma", "Noto Sans Thaana", "MV Boli", sans-serif;

	--text-3xs: 11px; --text-2xs: 12px; --text-xs: 13px; --text-sm: 14px; --text-md: 16px;
	--text-lg: 18px; --text-xl: 21px; --text-2xl: 26px; --text-3xl: 32px; --text-4xl: 40px;
	--text-5xl: 52px; --text-6xl: 68px;

	--leading-tight: 1.08; --leading-snug: 1.18; --leading-heading: 1.22;
	--leading-body: 1.55; --leading-loose: 1.72;

	/* Brand type scale: Roboto headlines and titles Bold 700, subheads Medium
	   500, big numbers Black 900; overlines SemiBold 600, labels Medium 500,
	   body Regular 400. */
	--weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-black: 900;
	--weight-head: var(--weight-bold); --weight-title: var(--weight-bold); --weight-sub: var(--weight-medium); --weight-number: var(--weight-black);

	--track-tight: -0.012em; --track-caps: 0.1em;

	/* Space */
	--space-1: 2px; --space-2: 4px; --space-3: 8px; --space-4: 12px; --space-5: 16px;
	--space-6: 20px; --space-7: 24px; --space-8: 32px; --space-9: 40px; --space-10: 48px;
	--space-11: 64px; --space-12: 80px;

	--gutter: clamp(16px, 4vw, 48px);
	--page-max: 1240px;
	--prose-max: 720px;
	/* Brand spacing: 8–16px within a group, 24–32px between groups,
	   48–64px between sections. */
	--section-y: clamp(48px, 5vw, 64px);

	/* Shape: MV+ rounds generously, never sharp. */
	--radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px;
	--radius-xl: 24px; --radius-pill: 999px;
	--radius-card: var(--radius-lg);
	--radius-media: var(--radius-md);

	--shadow-2: 0 6px 16px -4px rgba(0, 0, 0, .45);
	--shadow-3: 0 18px 40px -12px rgba(0, 0, 0, .58);
	--glow-cyan: 0 0 0 1px rgba(0, 201, 216, .36), 0 6px 26px -6px rgba(0, 201, 216, .3);
	--ring-focus: 0 0 0 2px var(--surface-page), 0 0 0 4px var(--focus-ring);
	/* The guidelines' Deep overlay (Ocean 700 into Ink) for text on photos. */
	--scrim-bottom: linear-gradient(180deg, rgba(0, 51, 78, 0) 0%, rgba(0, 51, 78, .5) 50%, rgba(8, 21, 31, .94) 100%);
	--blur-glass: saturate(140%) blur(18px);

	--ease-standard: cubic-bezier(.2, .8, .2, 1);
	--ease-out: cubic-bezier(.16, 1, .3, 1);
	--duration-fast: 140ms;
	--duration-base: 220ms;
	--duration-slow: 360ms;

	/* Data colours. Neutral data is Ocean Blue; categories use the guidelines'
	   expanded palette (cyan, coral, sun, orchid, seafoam, lime); Other is
	   blue-grey. Green and coral otherwise mean up and down. */
	--data-neutral: var(--ocean-500);
	--data-up: #87BF5E;
	--data-down: #D9604C;
	--series-1: #14C4D8; --series-2: #FF6B57; --series-3: #FFC93C; --series-4: #906CE5;
	--series-5: #8CF5E2; --series-6: #E9F8AA; --series-7: var(--ocean-400); --series-8: #8C969F;

	color-scheme: dark;
}

[data-theme="light"],
.mv-light {
	/* Canvas page, white cards, Ocean 100 section tints. */
	--surface-page: #F3FAFC;
	--surface-sunken: var(--ocean-100);
	--surface-card: var(--white);
	--surface-raised: var(--ocean-100);
	--surface-overlay: rgba(243, 250, 252, .9);
	--surface-hover: rgba(22, 52, 77, .04);
	--surface-active: rgba(22, 52, 77, .08);
	--surface-placeholder: #E8F1F6;
	--text-strong: #16344D;
	--text-body: #3A4F5C;
	/* The guidelines' #607D8B is under 4.5:1; #546E7A is their safe body grey. */
	--text-muted: #546E7A;
	--text-faint: #546E7A;
	/* Coloured text on light is Ocean 600; cyan and mint are never text here. */
	--text-accent: var(--ocean-600);
	--text-link: var(--ocean-600);
	--text-link-hover: var(--ocean-700);
	--text-on-accent: var(--white);
	--action-fill: var(--ocean-600);
	--action-fill-hover: var(--ocean-700);
	--on-action-fill: var(--white);
	/* Mint is never a thin line on light; the marker becomes Ocean Blue. */
	--marker: var(--ocean-500);
	--border-hairline: #D3E3E9;
	--border-subtle: #C2D6DE;
	--border-strong: #A9C2CC;
	--focus-ring: var(--ocean-500);
	--shadow-2: 0 6px 16px -6px rgba(22, 52, 77, .16);
	--shadow-3: 0 18px 40px -16px rgba(22, 52, 77, .22);
	--success-500: #4F7F33; --danger-500: #B4432F;
	--series-1: #13B9D1; --series-2: #FF6450; --series-3: #FFC23A; --series-4: #8C66E4;
	--series-5: #7DEBD6; --series-6: #DCF294; --series-7: var(--ocean-600); --series-8: #8C969F;
	color-scheme: light;
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--duration-fast: 0ms;
		--duration-base: 0ms;
		--duration-slow: 0ms;
	}
}