/*
 * CPWL brand tokens — CPWL UI/UX Specification v9.0.0
 *
 * Ported from the specification's token file (skills/cpwl-ui-ux/assets/app.css).
 * That file is written for Tailwind v4, so `@theme inline`, `@apply` and
 * `@custom-variant` are dropped here; the tokens themselves are plain CSS custom
 * properties and come across verbatim. Do not recalculate the oklch() values.
 *
 * Consumed by the branded Swagger UI page and the sign-in screen. Loaded before
 * swagger.css, which does the vendor overriding.
 */

/* ------------------------------------------------------------------ *
 * Typefaces (§3.3). Self-hosted — never Google Fonts or a CDN.
 * unicode-range values are Fontsource's own, copied verbatim.
 * ------------------------------------------------------------------ */

@font-face {
	font-family: 'Montserrat';
	font-style: normal;
	font-display: swap;
	font-weight: 600;
	src: url('./fonts/montserrat-latin-ext-600-normal.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
		U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
		U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Montserrat';
	font-style: normal;
	font-display: swap;
	font-weight: 600;
	src: url('./fonts/montserrat-latin-600-normal.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
		U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Montserrat';
	font-style: normal;
	font-display: swap;
	font-weight: 700;
	src: url('./fonts/montserrat-latin-ext-700-normal.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
		U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
		U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Montserrat';
	font-style: normal;
	font-display: swap;
	font-weight: 700;
	src: url('./fonts/montserrat-latin-700-normal.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
		U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Jost';
	font-style: normal;
	font-display: swap;
	font-weight: 300;
	src: url('./fonts/jost-latin-ext-300-normal.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
		U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
		U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Jost';
	font-style: normal;
	font-display: swap;
	font-weight: 300;
	src: url('./fonts/jost-latin-300-normal.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
		U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Jost';
	font-style: normal;
	font-display: swap;
	font-weight: 400;
	src: url('./fonts/jost-latin-ext-400-normal.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
		U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
		U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Jost';
	font-style: normal;
	font-display: swap;
	font-weight: 400;
	src: url('./fonts/jost-latin-400-normal.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
		U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Jost';
	font-style: normal;
	font-display: swap;
	font-weight: 500;
	src: url('./fonts/jost-latin-ext-500-normal.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
		U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
		U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Jost';
	font-style: normal;
	font-display: swap;
	font-weight: 500;
	src: url('./fonts/jost-latin-500-normal.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
		U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/*
 * Macron fix — te reo Māori in Jost (§3.3, §12.2).
 *
 * Loaded through Fontsource's stock per-weight CSS alone, Jost renders every
 * precomposed macron vowel with the macron over the FOLLOWING character:
 * "tāngata" comes out as "tan̄gata", "Mā te" as "Ma‾te". Montserrat is not
 * affected, so headings look right while body copy quietly mangles every te reo
 * term.
 *
 * The cause is the split between Fontsource's `latin` and `latin-ext` faces:
 * both claim U+0304, the combining macron, and the mark ends up resolved from
 * the latin face with no attachment to its base, landing at the pen position.
 * Declaring these faces last, mapping Latin Extended-A to the same latin-ext
 * file, resolves the precomposed character in one face and puts the macron back
 * where it belongs.
 *
 * The range is deliberately narrow. It must not include U+0304, or the mark
 * returns, and it must not be widened to cover Basic Latin: the latin-ext
 * subset carries none of the 93 printable ASCII characters, so a face claiming
 * U+0000-024F silently drops all body copy to the fallback font.
 */
@font-face {
	font-family: 'Jost';
	src: url('./fonts/jost-latin-ext-300-normal.woff2') format('woff2');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-017F;
}
@font-face {
	font-family: 'Jost';
	src: url('./fonts/jost-latin-ext-400-normal.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-017F;
}
@font-face {
	font-family: 'Jost';
	src: url('./fonts/jost-latin-ext-500-normal.woff2') format('woff2');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-017F;
}

/* ------------------------------------------------------------------ *
 * Tokens (§4). Copied from the specification's app.css.
 * ------------------------------------------------------------------ */

:root {
	--radius: 0.625rem;

	/* Primary — CPWL Dark Blue #00234b */
	--primary: oklch(0.259 0.084 255);
	--primary-foreground: oklch(0.99 0.005 255);

	/* Background — clean white with a cool cast */
	--background: oklch(0.99 0.002 230);
	--foreground: oklch(0.464 0.003 264); /* CPWL Charcoal #58595b */

	--card: oklch(1 0 0);
	--card-foreground: oklch(0.464 0.003 264);
	--popover: oklch(1 0 0);
	--popover-foreground: oklch(0.464 0.003 264);

	/* Secondary — light mid-blue tint */
	--secondary: oklch(0.955 0.018 234);
	--secondary-foreground: oklch(0.32 0.06 250);

	--muted: oklch(0.965 0.008 234);
	--muted-foreground: oklch(0.5 0.015 250);

	/* Accent — CPWL Mid Blue #00a4e0. Fills/rings only, never body text. */
	--accent: oklch(0.677 0.141 234);
	--accent-foreground: oklch(0.99 0.005 234);

	/* Destructive — CPWL Candy Apple #ee243b */
	--destructive: oklch(0.611 0.23 23);
	--destructive-foreground: oklch(0.99 0.005 23);

	--border: oklch(0.91 0.012 235);
	--input: oklch(0.91 0.012 235);
	--ring: oklch(0.677 0.141 234);

	/* Status — CPWL secondary palette, darkened to clear 4.5:1 as text. */
	--status-success: oklch(0.51 0.16 146); /* Spring Green     */
	--status-success-bg: oklch(0.95 0.045 146);
	--status-warning: oklch(0.525 0.171 85); /* Sunflower Yellow */
	--status-warning-bg: oklch(0.95 0.06 85);
	--status-danger: oklch(0.54 0.23 23); /* Candy Apple      */
	--status-danger-bg: oklch(0.95 0.04 23);
	--status-info: oklch(0.51 0.141 234); /* Mid Blue         */
	--status-info-bg: oklch(0.95 0.045 234);

	/* Charts — brand-aligned */
	--chart-1: oklch(0.677 0.141 234); /* mid blue     */
	--chart-2: oklch(0.259 0.084 255); /* dark blue    */
	--chart-3: oklch(0.634 0.16 146); /* spring green */
	--chart-4: oklch(0.687 0.184 45); /* orange       */
	--chart-5: oklch(0.611 0.23 23); /* candy apple  */

	/* Sidebar — CPWL Dark Blue, the signature brand surface */
	--sidebar: oklch(0.259 0.084 255);
	--sidebar-foreground: oklch(0.93 0.01 240);
	--sidebar-primary: oklch(0.677 0.141 234);
	--sidebar-primary-foreground: oklch(0.99 0.005 234);
	--sidebar-accent: oklch(0.33 0.07 250);
	--sidebar-accent-foreground: oklch(0.98 0.005 234);
	--sidebar-border: oklch(0.33 0.06 252);
	--sidebar-ring: oklch(0.677 0.141 234);

	/*
	 * Fill tier (§3.2) — the brand hex verbatim, for non-text UI. Used by the
	 * HTTP method chips in swagger.css, which pair every fill with its method
	 * name as text, so nothing is signalled by colour alone.
	 */
	--fill-mid-blue: #00a4e0;
	--fill-spring-green: #3aa349;
	--fill-sunflower: #fec00f;
	--fill-orange: #f36c21;
	--fill-candy-apple: #ee243b;
	--fill-charcoal: #58595b;
	--fill-navy: #00234b;

	--font-display: 'Montserrat', system-ui, sans-serif;
	--font-sans: 'Jost', system-ui, sans-serif;
	--font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono',
		monospace;

	/* The code surface is pinned in BOTH themes — see swagger.css. */
	--code-surface: oklch(0.21 0.05 255);

	/* Modal scrim. Derived from navy rather than from --primary, which lifts to
	   a mid blue on dark and would wash the overlay out. */
	--scrim: oklch(0.259 0.084 255 / 0.6);
}

.dark {
	/* Navy is unreadable as a heading colour on dark — primary lifts to a
	   brand mid-blue that still reads as the same family. 7.08:1 on card. */
	--primary: oklch(0.7 0.12 234);
	--primary-foreground: oklch(0.16 0.03 240);
	--background: oklch(0.15 0.025 255);
	--foreground: oklch(0.94 0.008 240);
	--card: oklch(0.19 0.03 253);
	--card-foreground: oklch(0.94 0.008 240);
	--popover: oklch(0.19 0.03 253);
	--popover-foreground: oklch(0.94 0.008 240);
	--secondary: oklch(0.26 0.035 250);
	--secondary-foreground: oklch(0.9 0.015 240);
	--muted: oklch(0.23 0.025 250);
	--muted-foreground: oklch(0.66 0.015 240);
	--accent: oklch(0.72 0.125 234);
	--accent-foreground: oklch(0.16 0.03 240);
	--destructive: oklch(0.68 0.2 23);
	--destructive-foreground: oklch(0.99 0.005 23);
	--border: oklch(0.29 0.03 250);
	--input: oklch(0.29 0.03 250);
	--ring: oklch(0.72 0.125 234);

	--status-success: oklch(0.68 0.16 146);
	--status-success-bg: oklch(0.27 0.05 146);
	--status-warning: oklch(0.72 0.171 85);
	--status-warning-bg: oklch(0.28 0.055 85);
	--status-danger: oklch(0.7 0.23 23);
	--status-danger-bg: oklch(0.27 0.055 23);
	--status-info: oklch(0.7 0.141 234);
	--status-info-bg: oklch(0.27 0.05 234);

	--chart-1: oklch(0.72 0.125 234);
	--chart-2: oklch(0.62 0.1 248);
	--chart-3: oklch(0.68 0.16 146);
	--chart-4: oklch(0.75 0.17 45);
	--chart-5: oklch(0.7 0.23 23);

	/* Sidebar — keeps the dark blue identity, one step deeper */
	--sidebar: oklch(0.21 0.05 255);
	--sidebar-foreground: oklch(0.93 0.01 240);
	--sidebar-primary: oklch(0.72 0.125 234);
	--sidebar-primary-foreground: oklch(0.16 0.03 240);
	--sidebar-accent: oklch(0.29 0.06 250);
	--sidebar-accent-foreground: oklch(0.98 0.005 234);
	--sidebar-border: oklch(0.28 0.05 252);
	--sidebar-ring: oklch(0.72 0.125 234);

	--code-surface: oklch(0.13 0.025 255);
	--scrim: oklch(0.1 0.02 255 / 0.75);
}

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

html {
	overscroll-behavior-y: contain;
	color-scheme: light;
}
.dark html,
html.dark {
	color-scheme: dark;
}

body {
	background: var(--background);
	color: var(--foreground);
	font-family: var(--font-sans);
	font-weight: 400;
	margin: 0;
}

/*
 * THE load-bearing rule (§4): every heading is navy Montserrat. Components
 * never set this themselves.
 */
h1,
h2,
h3,
h4,
h5,
h6,
.font-display {
	font-family: var(--font-display);
	color: var(--primary);
}

*:focus-visible {
	outline: 2px solid var(--ring);
	outline-offset: 2px;
}