/* Generated from titanium-contrast.json by system/desktop/brand-palette.ts --tailwind. Do not edit. */
@import "tailwindcss";

/*
 * `:is()` keeps the dark compound at (0,2,0), so `bg-zinc-900 dark:bg-zinc-100`
 * outranks a bare `.bg-zinc-900`. `:where()` would zero it out and every dark:
 * utility in KokonutUI and Magic UI would lose to the base class.
 */
@custom-variant dark (&:is(.dark *));

/* Semantic tokens the two libraries read, then the GK scale they read them from. */
:root, .dark {
	--radius: 0.75rem;
	--gk-ink: var(--foreground);
	--gk-ink-soft: var(--muted-foreground);
	--gk-panel: var(--background);
	--gk-panel-sunk: #151820; /* vars.brushedTitanium */
	--gk-line: var(--border);
	--gk-accent: #00b4ff; /* vars.electricBlue */
	--gk-accent-deep: #0082b3; /* vars.deepBlue */
	--gk-gold: #d4c090; /* vars.titaniumGold */
	--gk-ok: #00ff88; /* vars.readoutGreen */
	--gk-warn: #ffb347; /* vars.warningAmber */
	--gk-heart: #ff71bb; /* vars.flareRose */
}

:root {
	--background: #eef5fb; /* mix(starWhite, brightAluminum, 0.60) */
	--foreground: #0f1216; /* vars.darkTitanium */
	--muted-foreground: #6b7888; /* vars.steelGray */
	--border: #d9e2e8; /* mix(starWhite, canvasText, 0.45) */
	--gk-panel-raised: #f2fbff; /* vars.starWhite */
	--gk-panel-soft: #e9f2f7; /* mix(starWhite, canvasText, 0.80) */
	--gk-line-faint: #e5eef4; /* mix(starWhite, canvasText, 0.72) */
}

.dark {
	--background: #0f1216; /* vars.darkTitanium */
	--foreground: #c5cdd6; /* vars.canvasText */
	--muted-foreground: #9ca3b0; /* vars.dimAluminum */
	--border: #2a3038; /* vars.subtleGray */
	--gk-panel-raised: #02060f; /* vars.voidNavy */
	--gk-panel-soft: #1d2127; /* mix(subtleGray, darkTitanium, 0.50) */
	--gk-line-faint: #181d22; /* mix(subtleGray, darkTitanium, 0.35) */
}

@theme inline {
	--color-background: var(--background);
	--color-foreground: var(--foreground);
	--color-muted-foreground: var(--muted-foreground);
	--color-border: var(--border);
	--radius-lg: var(--radius);

	/*
	 * Stock Tailwind names, GK lightness order. A ramp that flips with the theme
	 * breaks the libraries: they write `text-zinc-900 dark:text-zinc-50`, so zinc-50
	 * has to stay the lightest step in both themes.
	 */
	--color-zinc-50: #f2fbff; /* vars.starWhite */
	--color-zinc-100: #eff7fc; /* mix(starWhite, brightAluminum, 0.70) */
	--color-zinc-200: #d9e2e8; /* mix(starWhite, canvasText, 0.45) */
	--color-zinc-300: #c5cdd6; /* vars.canvasText */
	--color-zinc-400: #9ca3b0; /* vars.dimAluminum */
	--color-zinc-500: #6b7888; /* vars.steelGray */
	--color-zinc-600: #566274; /* vars.junctionGray */
	--color-zinc-700: #2a3038; /* vars.subtleGray */
	--color-zinc-800: #1d2127; /* mix(subtleGray, darkTitanium, 0.50) */
	--color-zinc-900: #0f1216; /* vars.darkTitanium */
	--color-zinc-950: #02060f; /* vars.voidNavy */

	--color-orange-100: color-mix(in oklab, var(--gk-accent) 14%, var(--gk-panel-raised));
	--color-orange-300: var(--gk-gold);
	--color-orange-400: var(--gk-warn);
	--color-orange-500: var(--gk-accent);
	--color-orange-600: var(--gk-warn);
	--color-orange-700: var(--gk-accent-deep);
	--color-sky-50: color-mix(in oklab, var(--gk-accent) 10%, var(--gk-panel-raised));
	--color-sky-100: color-mix(in oklab, var(--gk-accent) 16%, var(--gk-panel-raised));
	--color-sky-300: #62d8f2; /* vars.keyCyan */
	--color-sky-400: var(--gk-accent);
	--color-sky-500: var(--gk-accent);
	--color-sky-600: var(--gk-accent-deep);
	--color-sky-700: var(--gk-accent-deep);
	--color-sky-950: #02060f; /* vars.voidNavy */
	--color-emerald-400: var(--gk-ok);
	--color-emerald-500: var(--gk-ok);
	--color-emerald-600: #01b966; /* mix(readoutGreen, voidNavy, 0.72) */
	--color-emerald-950: #02060f; /* vars.voidNavy */
	--color-rose-500: var(--gk-heart);
}

/* Magic UI `animated-theme-toggler`: let the circular reveal drive the transition. */
::view-transition-old(root),
::view-transition-new(root) {
	animation: none;
	mix-blend-mode: normal;
}

html[data-magicui-theme-vt="active"]::view-transition-group(root) {
	animation-duration: var(--magicui-theme-toggle-vt-duration);
}