/**
 * Oat 0.8's built-in palette uses the CSS light-dark() function driven purely by
 * the `color-scheme` property, which otherwise just follows the OS/browser's
 * prefers-color-scheme -- Oat's own CSS ships no [data-theme="light"] or
 * [data-theme="dark"] rule. Without forcing color-scheme here, selecting "Light"
 * or "Dark" in OatThemeSwitcher has no visible effect and both look identical
 * (whatever the system prefers). These two rules make the explicit choice stick.
 **/
[data-theme="light"] {
    color-scheme: light;
}

[data-theme="dark"] {
    color-scheme: dark;
}

/**
 * A component pinned to Light or Dark (Oat.Behaviors.theme(...)) inside a page using
 * another theme would otherwise inherit that theme's variables, since Oat defines its
 * own palette only on :root. Re-declare Oat 0.8.1's defaults (keep them in sync with
 * oat.min.css when updating Oat), including the shape tokens the Business themes change.
 **/
[data-theme="light"],
[data-theme="dark"] {
    --background: light-dark(#fff, #09090b);
    --foreground: light-dark(#09090b, #fafafa);
    --card: light-dark(#fff, #18181b);
    --card-foreground: light-dark(#09090b, #fafafa);
    --primary: light-dark(#574747, #fafafa);
    --primary-foreground: light-dark(#fafafa, #18181b);
    --secondary: light-dark(#f4f4f5, #27272a);
    --secondary-foreground: light-dark(#574747, #fafafa);
    --muted: light-dark(#f4f4f5, #27272a);
    --muted-foreground: light-dark(#71717a, #a1a1aa);
    --faint: light-dark(#fafafa, #1e1e21);
    --faint-foreground: light-dark(#a1a1aa, #71717a);
    --accent: light-dark(#f4f4f5, #27272a);
    --danger: light-dark(#d32f2f, #f4807b);
    --danger-foreground: light-dark(#fafafa, #18181b);
    --success: light-dark(#008032, #6cc070);
    --success-foreground: light-dark(#fafafa, #18181b);
    --warning: light-dark(#a65b00, #f0a030);
    --warning-foreground: #09090b;
    --border: light-dark(#d4d4d8, #52525b);
    --input: light-dark(#d4d4d8, #52525b);
    --ring: light-dark(#574747, #d4d4d8);
    --radius-small: .125rem;
    --radius-medium: .375rem;
    --radius-large: .75rem;
    --shadow-small: 0 1px 2px 0 rgb(0 0 0 / .05);
    --shadow-medium: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);
    --shadow-large: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);
}

/*
 * Text in a pinned component follows its own theme, not the page's (body sets the page's).
 * In Oat's lowest layer, so components that set their own color (cards, buttons) still win.
 */
@layer theme {
    [data-theme]:not(html) {
        color: var(--foreground);
    }
}

/** Custom Midnight Theme **/
[data-theme="midnight"] {
    color-scheme: dark;
    --background: #020617;
    --foreground: #f8fafc;
    --card: #0f172a;
    --card-foreground: #f8fafc;
    --primary: #38bdf8;
    --primary-foreground: #020617;
    --secondary: #1e293b;
    --secondary-foreground: #f8fafc;
    --muted: #1e293b;
    --muted-foreground: #94a3b8;
    --faint: #0f172a;
    --accent: #1e293b;
    --danger-foreground: #f8fafc;
    --success-foreground: #f8fafc;
    --warning-foreground: #020617;
    --border: #1e293b;
    --input: #1e293b;
    --ring: #38bdf8;
}

/** Nord Theme **/
[data-theme="nord"] {
    color-scheme: dark;
    --background: #2e3440;
    --foreground: #d8dee9;
    --card: #3b4252;
    --card-foreground: #d8dee9;
    --primary: #88c0d0;
    --primary-foreground: #2e3440;
    --secondary: #434c5e;
    --secondary-foreground: #e5e9f0;
    --muted: #4c566a;
    --muted-foreground: #d8dee9;
    --faint: #3b4252;
    --border: #434c5e;
    --input: #434c5e;
    --ring: #88c0d0;
}

/** Everforest Theme **/
[data-theme="everforest"] {
    color-scheme: dark;
    --background: #272e33;
    --foreground: #d3c6aa;
    --card: #2e383c;
    --card-foreground: #d3c6aa;
    --primary: #a7c080;
    --primary-foreground: #272e33;
    --secondary: #374145;
    --secondary-foreground: #d3c6aa;
    --muted: #414b50;
    --muted-foreground: #859289;
    --faint: #2e383c;
    --border: #414b50;
    --input: #414b50;
    --ring: #a7c080;
}

/** Tokyo Night Theme **/
[data-theme="tokyo-night"] {
    color-scheme: dark;
    --background: #1a1b26;
    --foreground: #a9b1d6;
    --card: #24283b;
    --card-foreground: #a9b1d6;
    --primary: #7aa2f7;
    --primary-foreground: #1a1b26;
    --secondary: #292e42;
    --secondary-foreground: #c0caf5;
    --muted: #414868;
    --muted-foreground: #565f89;
    --faint: #24283b;
    --border: #292e42;
    --input: #292e42;
    --ring: #7aa2f7;
}

/** Rose Pine Dawn Theme (Light) **/
[data-theme="rose-pine-dawn"] {
    color-scheme: light;
    --background: #faf4ed;
    --foreground: #575279;
    --card: #fffaf3;
    --card-foreground: #575279;
    --primary: #907aa9;
    --primary-foreground: #faf4ed;
    --secondary: #f2e9e1;
    --secondary-foreground: #575279;
    --muted: #cecacd;
    --muted-foreground: #797593;
    --faint: #f2e9e1;
    --border: #dfdad9;
    --input: #dfdad9;
    --ring: #907aa9;
}

/** Royal Theme **/
[data-theme="royal"] {
    color-scheme: dark;
    --background: #1e1b4b;
    --foreground: #e0e7ff;
    --card: #312e81;
    --card-foreground: #e0e7ff;
    --primary: #6366f1;
    --primary-foreground: #ffffff;
    --secondary: #3730a3;
    --secondary-foreground: #e0e7ff;
    --muted: #4338ca;
    --muted-foreground: #a5b4fc;
    --faint: #312e81;
    --border: #4338ca;
    --input: #4338ca;
    --ring: #818cf8;
}

/** Clay Theme **/
[data-theme="clay"] {
    color-scheme: light;
    --background: #fdfaf6;
    --foreground: #4a4a4a;
    --card: #ffffff;
    --card-foreground: #4a4a4a;
    --primary: #d2b48c;
    --primary-foreground: #ffffff;
    --secondary: #f5f5f5;
    --secondary-foreground: #4a4a4a;
    --muted: #e5e5e5;
    --muted-foreground: #8c8c8c;
    --faint: #f5f5f5;
    --border: #dcdcdc;
    --input: #dcdcdc;
    --ring: #d2b48c;
}

/** Catppuccin Mocha Theme **/
[data-theme="catppuccin-mocha"] {
    color-scheme: dark;
    --background: #1e1e2e;
    --foreground: #cdd6f4;
    --card: #313244;
    --card-foreground: #cdd6f4;
    --primary: #cba6f7;
    --primary-foreground: #1e1e2e;
    --secondary: #74c7ec;
    --secondary-foreground: #cdd6f4;
    --muted: #6c7086;
    --muted-foreground: #a6adc8;
    --faint: #45475a;
    --border: #585b70;
    --input: #585b70;
    --ring: #cba6f7;
}

/** Catppuccin Latte Theme **/
[data-theme="catppuccin-latte"] {
    color-scheme: light;
    --background: #eff1f5;
    --foreground: #4c4f69;
    --card: #ccd0da;
    --card-foreground: #4c4f69;
    --primary: #8839ef;
    --primary-foreground: #eff1f5;
    --secondary: #209fb5;
    --secondary-foreground: #4c4f69;
    --muted: #9ca0b0;
    --muted-foreground: #7c7f93;
    --faint: #bcc0cc;
    --border: #acb0be;
    --input: #acb0be;
    --ring: #8839ef;
}

/** Material Design Theme **/
[data-theme="material"] {
    color-scheme: light;
    --background: #fafafa;
    --foreground: #212121;
    --card: #ffffff;
    --card-foreground: #212121;
    --primary: #6200ee;
    --primary-foreground: #ffffff;
    --secondary: #03dac6;
    --secondary-foreground: #000000;
    --muted: #f5f5f5;
    --muted-foreground: #757575;
    --faint: #eeeeee;
    --border: #e0e0e0;
    --input: #e0e0e0;
    --ring: #bb86fc;
}

/** Daisy UI Dark Theme **/
[data-theme="daisy"] {
    color-scheme: dark;
    --background: #1d232a;
    --foreground: #a6adbb;
    --card: #2a323c;
    --card-foreground: #a6adbb;
    --primary: #661ae6;
    --primary-foreground: #ffffff;
    --secondary: #d926aa;
    --secondary-foreground: #ffffff;
    --muted: #191d24;
    --muted-foreground: #717d91;
    --faint: #15191e;
    --border: #38414e;
    --input: #191d24;
    --ring: #661ae6;
}

/** Ultraviolet OKLCH Theme **/
[data-theme="ultraviolet"] {
    color-scheme: dark;
    --background: oklch(25.33% 0.016 252.42);
    --foreground: oklch(74% 0.16 232.661);
    --card: oklch(23.26% 0.014 253.1);
    --card-foreground: oklch(74% 0.16 232.661);
    --primary: oklch(58% 0.233 277.117);
    --primary-foreground: #ffffff;
    --secondary: oklch(65% 0.241 354.308);
    --secondary-foreground: #ffffff;
    --accent: oklch(77% 0.152 181.912);
    --muted: oklch(21.15% 0.012 254.09);
    --muted-foreground: oklch(74% 0.16 232.661);
    --faint: oklch(14% 0.005 285.823);
    --border: oklch(21.15% 0.012 254.09);
    --input: oklch(21.15% 0.012 254.09);
    --ring: oklch(58% 0.233 277.117);
}

/** Halloween OKLCH Theme **/
[data-theme="halloween"] {
    color-scheme: dark;
    --background: oklch(21% 0.006 56.043);
    --foreground: oklch(90% 0.05 60);
    --card: oklch(14% 0.004 49.25);
    --card-foreground: oklch(77.48% 0.204 60.62);
    --primary: oklch(77.48% 0.204 60.62);
    --primary-foreground: #000000;
    --secondary: oklch(45.98% 0.248 305.03);
    --secondary-foreground: #ffffff;
    --accent: oklch(64.8% 0.223 136.073);
    --muted: oklch(24.371% 0.046 65.681);
    --muted-foreground: oklch(77.48% 0.204 60.62);
    --faint: oklch(0% 0 0);
    --border: oklch(24.371% 0.046 65.681);
    --input: oklch(24.371% 0.046 65.681);
    --ring: oklch(77.48% 0.204 60.62);
}

/** Wireframe OKLCH Theme **/
[data-theme="wireframe"] {
    color-scheme: light;
    --background: oklch(100% 0 0);
    --foreground: #000000;
    --card: oklch(97% 0 0);
    --card-foreground: #000000;
    --primary: oklch(87% 0 0);
    --primary-foreground: #000000;
    --secondary: oklch(87% 0 0);
    --secondary-foreground: #000000;
    --accent: oklch(87% 0 0);
    --muted: oklch(94% 0 0);
    --muted-foreground: #666666;
    --faint: oklch(97% 0 0);
    --border: #000000;
    --input: oklch(100% 0 0);
    --ring: oklch(87% 0 0);
}

/** Christmas Theme **/
[data-theme="xmas"] {
    color-scheme: dark;
    --background: #064e3b;
    --foreground: #fef2f2;
    --card: #065f46;
    --card-foreground: #fef2f2;
    --primary: #dc2626;
    --primary-foreground: #ffffff;
    --secondary: #166534;
    --secondary-foreground: #ffffff;
    --accent: #fcd34d;
    --muted: #065f46;
    --muted-foreground: #a7f3d0;
    --faint: #042f2e;
    --border: #059669;
    --input: #059669;
    --ring: #dc2626;
}

/**
 * Business Themes (Light and Dark): a sober look for line-of-business apps. Unlike the
 * themes above they also set the status colors (every text/background pair meets WCAG AA),
 * tighter corner radii and lighter shadows. Combine them with data-density="compact"
 * (wicket-oat.css) for denser forms and tables.
 **/
[data-theme="business"] {
    color-scheme: light;
    --background: #f5f7fa;
    --foreground: #1f2937;
    --card: #ffffff;
    --card-foreground: #1f2937;
    --primary: #1d4ed8;
    --primary-foreground: #ffffff;
    --secondary: #e8ecf1;
    --secondary-foreground: #1f2937;
    --muted: #eef1f5;
    --muted-foreground: #5b6675;
    --faint: #f9fafb;
    --faint-foreground: #8a94a3;
    --accent: #e8eef8;
    --danger: #b42318;
    --danger-foreground: #ffffff;
    --success: #067647;
    --success-foreground: #ffffff;
    --warning: #b54708;
    --warning-foreground: #ffffff;
    --border: #d0d6de;
    --input: #c3cad4;
    --ring: #2563eb;
    --shadow-small: 0 1px 2px 0 rgb(16 24 40 / .05);
    --shadow-medium: 0 1px 3px 0 rgb(16 24 40 / .08), 0 1px 2px -1px rgb(16 24 40 / .04);
    --shadow-large: 0 4px 8px -2px rgb(16 24 40 / .08), 0 2px 4px -2px rgb(16 24 40 / .04);
}

[data-theme="business-dark"] {
    color-scheme: dark;
    --background: #0f141a;
    --foreground: #e5e9ef;
    --card: #171d24;
    --card-foreground: #e5e9ef;
    --primary: #5b93ff;
    --primary-foreground: #0b1220;
    --secondary: #252d37;
    --secondary-foreground: #e5e9ef;
    --muted: #202832;
    --muted-foreground: #9aa5b4;
    --faint: #141a21;
    --faint-foreground: #6b7685;
    --accent: #222b36;
    --danger: #f97066;
    --danger-foreground: #0f141a;
    --success: #47cd89;
    --success-foreground: #0f141a;
    --warning: #fdb022;
    --warning-foreground: #0f141a;
    --border: #2c3540;
    --input: #3a4452;
    --ring: #5b93ff;
}

:is([data-theme="business"], [data-theme="business-dark"]) {
    --radius-small: .125rem;
    --radius-medium: .25rem;
    --radius-large: .375rem;
}

/* Figures line up in table columns */
:is([data-theme="business"], [data-theme="business-dark"]) table {
    font-variant-numeric: tabular-nums;
}
