/*
 * Kulcho — the Kulcho design system for the creator and organisation
 * dashboard wherever it wears Kulcho's own look (K-804ac6f1): every page that
 * has no brand of its own (partials/header.ejs loads this file only then), so
 * a Heduno page never reads it.
 *
 * Values from the Kulcho Design System Sam supplied on 30 Sep 2026
 * (docs/design/kulcho-design-system.html): Kulcho green #00CF74 with
 * near-black text on green fills, deeper green for small green text, the
 * system's greys light and dark, Plus Jakarta Sans, and its corners
 * (10px buttons and inputs, 16px cards, 24px windows).
 *
 * The dashboard's components already read tokens.css's variables; this file
 * gives them Kulcho's values. It repeats tokens.css's three selectors (light,
 * dark, and the system's dark when no look is chosen) in the same order, so
 * each one replaces the matching rule there.
 *
 * Plus Jakarta Sans (SIL Open Font License 1.1) is served from this folder so
 * the dashboard's content policy needs no outside font host.
 */
@font-face {
	font-family: "Plus Jakarta Sans";
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url("fonts/plus-jakarta-sans-latin-ext.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: "Plus Jakarta Sans";
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url("fonts/plus-jakarta-sans-latin.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;
}

:root {
	--font-sans: "Plus Jakarta Sans", -apple-system, system-ui, "Segoe UI", sans-serif;

	/* Corners: radius-md 10 (buttons, inputs), radius-lg 16 (cards), radius-xl 24 (windows). */
	--radius-md: 8px;
	--radius-lg: 10px;
	--radius-xl: 16px;
	--radius-2xl: 24px;
	--radius-3xl: 24px;

	/* brand, brand-hover, on-brand, brand-tint; brand-text for green words. */
	--primary-oklch: #00cf74;
	--primary-hover-oklch: #00b866;
	--primary-fg-oklch: #0a0a0a;
	--primary-muted-oklch: #e6faf1;
	--primary-subtle-oklch: #e6faf1;
	/* Focus rings in the deeper green: #00CF74 itself is 2.06:1 on white. */
	--ring-oklch: #007a43;
	--kc-brand-text: #007a43;
	--kc-brand-tint-ink: #006b3b;

	/* ground, surface, fill, surface (raised), ink, muted, line, line-strong */
	--bg-oklch: #f7f7f6;
	--surface-oklch: #ffffff;
	--surface-2-oklch: #f0f0ee;
	--surface-elevated-oklch: #ffffff;
	--text-oklch: #0f0f0f;
	--text-muted-oklch: #6b6b6b;
	--border-oklch: #e6e6e4;
	--border-strong-oklch: #d0d0cf;

	/* danger #D92D20 */
	--danger: 217 45 32;

	/* Cards at rest have a line; soft shadows only on floating things. */
	--elevation-md: 0 8px 30px rgb(15 15 15 / 0.06);
	--elevation-lg: 0 8px 30px rgb(15 15 15 / 0.08);
	--elevation-xl: 0 24px 60px rgb(15 15 15 / 0.18);
	--elevation-primary: 0 8px 20px rgb(0 207 116 / 0.25);

	color-scheme: light;
}

[data-theme="dark"] {
	--primary-oklch: #00cf74;
	--primary-hover-oklch: #33d98e;
	--primary-fg-oklch: #0a0a0a;
	--primary-muted-oklch: #0b2a1c;
	--primary-subtle-oklch: #0b2a1c;
	--ring-oklch: #00cf74;
	--kc-brand-text: #00cf74;
	--kc-brand-tint-ink: #5be3a6;

	--bg-oklch: #0b0b0b;
	--surface-oklch: #161616;
	--surface-2-oklch: #222222;
	--surface-elevated-oklch: #222222;
	--text-oklch: #f5f5f4;
	--text-muted-oklch: #9a9a98;
	--border-oklch: #2a2a2a;
	--border-strong-oklch: #3a3a3a;

	--danger: 249 112 102;

	--elevation-md: 0 8px 30px rgb(0 0 0 / 0.5);
	--elevation-lg: 0 8px 30px rgb(0 0 0 / 0.5);
	--elevation-xl: 0 24px 60px rgb(0 0 0 / 0.7);
	--elevation-primary: 0 8px 20px rgb(0 207 116 / 0.3);

	color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme]) {
		--primary-oklch: #00cf74;
		--primary-hover-oklch: #33d98e;
		--primary-fg-oklch: #0a0a0a;
		--primary-muted-oklch: #0b2a1c;
		--primary-subtle-oklch: #0b2a1c;
		--ring-oklch: #00cf74;
		--kc-brand-text: #00cf74;
		--kc-brand-tint-ink: #5be3a6;

		--bg-oklch: #0b0b0b;
		--surface-oklch: #161616;
		--surface-2-oklch: #222222;
		--surface-elevated-oklch: #222222;
		--text-oklch: #f5f5f4;
		--text-muted-oklch: #9a9a98;
		--border-oklch: #2a2a2a;
		--border-strong-oklch: #3a3a3a;

		--danger: 249 112 102;

		--elevation-md: 0 8px 30px rgb(0 0 0 / 0.5);
		--elevation-lg: 0 8px 30px rgb(0 0 0 / 0.5);
		--elevation-xl: 0 24px 60px rgb(0 0 0 / 0.7);
		--elevation-primary: 0 8px 20px rgb(0 207 116 / 0.3);

		color-scheme: dark;
	}
}

/* A flat ground, as in the design system (no grey glow at the top). */
body,
[data-theme="dark"] body {
	background-image: none;
	font-family: var(--font-sans);
}
@media (prefers-color-scheme: dark) {
	:root:not([data-theme]) body {
		background-image: none;
	}
}

/* Green words under 24px use the deeper brand-text green, which reads on white
   (#00CF74 itself is too light for small text). On a tint they use its ink. */
.text-primary,
.aria-pressed\:text-primary[aria-pressed="true"] {
	color: var(--kc-brand-text);
}
.bg-primary-subtle .text-primary,
.bg-primary-subtle.text-primary,
.bg-primary-muted.text-primary {
	color: var(--kc-brand-tint-ink);
}

/* Buttons carry their label in weight 600, as every Kulcho button does. */
.bg-primary.text-primary-foreground {
	font-weight: 600;
}

/* The overview's welcome card: Kulcho green with near-black text; its button
   is the system's secondary button, white with ink text. */
.hero-overview .hero-overview-greeting {
	font-weight: 700;
	letter-spacing: -0.02em;
}
.hero-overview .hero-overview-new-post {
	background-color: #ffffff;
	color: #0f0f0f;
}

/* Headings in the display weight with the system's tight tracking. */
h1,
h2,
.dashboard-title {
	letter-spacing: -0.02em;
}

/* A green button that cannot be pressed yet greys out instead of fading:
   a faded brand button reads as broken. */
.bg-primary.text-primary-foreground:disabled,
.bg-primary.text-primary-foreground[aria-disabled="true"] {
	background-color: var(--surface-2-oklch);
	color: var(--text-muted-oklch);
	box-shadow: none;
	opacity: 1;
}

/* Focus: a 2px outline in the ring colour (#007A43 light, #00CF74 dark) on
   anything reached by keyboard, as the design system asks. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--ring-oklch);
	outline-offset: 2px;
}