/*
 * Izenga design tokens — the single source of colour, radius, type and shadow for every Izenga UI.
 *
 * A shadcn/ui theme (made with tweakcn) in plain CSS, no build step, so the same file is used by:
 *   - the components, the hosted library (/lib/izenga.css) and the docs (mapped to Tailwind in src/styles/theme.css);
 *   - Vaadin apps, which reference it as /lib/izenga-tokens.css (mapped to Aura by
 *     vaadin/izenga-theme.css, hosted as /lib/izenga-vaadin.css).
 * Keep Tailwind syntax (@import, @theme, @apply) out of this file: Vaadin loads it as-is. That part lives in src/styles/theme.css.
 *
 * Every colour exists three times:
 *   --x-light / --x-dark   the raw value for each scheme (for themes that want the pair, like Aura);
 *   --x                    light-dark() of the two, which follows the element's `color-scheme`.
 *
 * Dark mode is therefore just `color-scheme: dark`. The `.dark` class (shadcn) and `data-theme="dark"`
 * set it below; Vaadin's @ColorScheme sets it on <html> directly.
 *
 * Pasting a new theme from tweakcn or ui.shadcn.com/themes: put its :root values in the -light column and its
 * .dark values in the -dark column. Publishing (admin, or `npm run build`) puts the change live for every system.
 */

:root {
    /* ── Shape, type, shadow (same in both schemes) ───────────────────── */
    --radius: 0.525rem;
    --font-sans: "Google Sans Flex", "Google Sans Flex Variable", ui-sans-serif, system-ui, sans-serif;
    --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --tracking-normal: 0.025em;
    --shadow-2xs: 0px 0px 1px 0px hsl(0 0% 0% / 0.05);
    --shadow-xs: 0px 0px 1px 0px hsl(0 0% 0% / 0.05);
    --shadow-sm: 0px 0px 1px 0px hsl(0 0% 0% / 0.10), 0px 1px 2px -1px hsl(0 0% 0% / 0.10);
    --shadow: 0px 0px 1px 0px hsl(0 0% 0% / 0.10), 0px 1px 2px -1px hsl(0 0% 0% / 0.10);
    --shadow-md: 0px 0px 1px 0px hsl(0 0% 0% / 0.10), 0px 2px 4px -1px hsl(0 0% 0% / 0.10);
    --shadow-lg: 0px 0px 1px 0px hsl(0 0% 0% / 0.10), 0px 4px 6px -1px hsl(0 0% 0% / 0.10);
    --shadow-xl: 0px 0px 1px 0px hsl(0 0% 0% / 0.10), 0px 8px 10px -1px hsl(0 0% 0% / 0.10);
    --shadow-2xl: 0px 0px 1px 0px hsl(0 0% 0% / 0.25);

    /* ── Light ────────────────────────────────────────────────────────── */
    --background-light: oklch(0.9911 0 0);
    --foreground-light: oklch(0.2046 0 0);
    --card-light: oklch(0.9911 0 0);
    --card-foreground-light: oklch(0.2046 0 0);
    --popover-light: oklch(0.9911 0 0);
    --popover-foreground-light: oklch(0.4386 0 0);
    --primary-light: oklch(0.8348 0.1302 160.9080);
    --primary-foreground-light: oklch(0.2626 0.0147 166.4589);
    --secondary-light: oklch(0.9940 0 0);
    --secondary-foreground-light: oklch(0.2046 0 0);
    --muted-light: oklch(0.9461 0 0);
    --muted-foreground-light: oklch(0.2435 0 0);
    --accent-light: oklch(0.9461 0 0);
    --accent-foreground-light: oklch(0.2435 0 0);
    --destructive-light: oklch(0.5523 0.1927 32.7272);
    --destructive-foreground-light: oklch(0.9934 0.0032 17.2118);
    --border-light: oklch(0.9037 0 0);
    --input-light: oklch(0.9731 0 0);
    --ring-light: oklch(0.8348 0.1302 160.9080);
    --chart-1-light: oklch(0.8348 0.1302 160.9080);
    --chart-2-light: oklch(0.6231 0.1880 259.8145);
    --chart-3-light: oklch(0.6056 0.2189 292.7172);
    --chart-4-light: oklch(0.7686 0.1647 70.0804);
    --chart-5-light: oklch(0.6959 0.1491 162.4796);
    --sidebar-light: oklch(0.9911 0 0);
    --sidebar-foreground-light: oklch(0.5452 0 0);
    --sidebar-primary-light: oklch(0.8348 0.1302 160.9080);
    --sidebar-primary-foreground-light: oklch(0.2626 0.0147 166.4589);
    --sidebar-accent-light: oklch(0.9461 0 0);
    --sidebar-accent-foreground-light: oklch(0.2435 0 0);
    --sidebar-border-light: oklch(0.9037 0 0);
    --sidebar-ring-light: oklch(0.8348 0.1302 160.9080);

    /* ── Dark ─────────────────────────────────────────────────────────── */
    --background-dark: oklch(0.1822 0 0);
    --foreground-dark: oklch(0.9288 0.0126 255.5078);
    --card-dark: oklch(0.2046 0 0);
    --card-foreground-dark: oklch(0.9288 0.0126 255.5078);
    --popover-dark: oklch(0.2603 0 0);
    --popover-foreground-dark: oklch(0.7348 0 0);
    --primary-dark: oklch(0.4365 0.1044 156.7556);
    --primary-foreground-dark: oklch(0.9213 0.0135 167.1556);
    --secondary-dark: oklch(0.2603 0 0);
    --secondary-foreground-dark: oklch(0.9851 0 0);
    --muted-dark: oklch(0.2393 0 0);
    --muted-foreground-dark: oklch(0.7122 0 0);
    --accent-dark: oklch(0.3132 0 0);
    --accent-foreground-dark: oklch(0.9851 0 0);
    --destructive-dark: oklch(0.3123 0.0852 29.7877);
    --destructive-foreground-dark: oklch(0.9368 0.0045 34.3092);
    --border-dark: oklch(0.2809 0 0);
    --input-dark: oklch(0.2603 0 0);
    --ring-dark: oklch(0.8003 0.1821 151.7110);
    --chart-1-dark: oklch(0.8003 0.1821 151.7110);
    --chart-2-dark: oklch(0.7137 0.1434 254.6240);
    --chart-3-dark: oklch(0.7090 0.1592 293.5412);
    --chart-4-dark: oklch(0.8369 0.1644 84.4286);
    --chart-5-dark: oklch(0.7845 0.1325 181.9120);
    --sidebar-dark: oklch(0.1822 0 0);
    --sidebar-foreground-dark: oklch(0.6301 0 0);
    --sidebar-primary-dark: oklch(0.4365 0.1044 156.7556);
    --sidebar-primary-foreground-dark: oklch(0.9213 0.0135 167.1556);
    --sidebar-accent-dark: oklch(0.3132 0 0);
    --sidebar-accent-foreground-dark: oklch(0.9851 0 0);
    --sidebar-border-dark: oklch(0.2809 0 0);
    --sidebar-ring-dark: oklch(0.8003 0.1821 151.7110);

    /* ── Semantic (follow color-scheme) ───────────────────────────────── */
    --background: light-dark(var(--background-light), var(--background-dark));
    --foreground: light-dark(var(--foreground-light), var(--foreground-dark));
    --card: light-dark(var(--card-light), var(--card-dark));
    --card-foreground: light-dark(var(--card-foreground-light), var(--card-foreground-dark));
    --popover: light-dark(var(--popover-light), var(--popover-dark));
    --popover-foreground: light-dark(var(--popover-foreground-light), var(--popover-foreground-dark));
    --primary: light-dark(var(--primary-light), var(--primary-dark));
    --primary-foreground: light-dark(var(--primary-foreground-light), var(--primary-foreground-dark));
    --secondary: light-dark(var(--secondary-light), var(--secondary-dark));
    --secondary-foreground: light-dark(var(--secondary-foreground-light), var(--secondary-foreground-dark));
    --muted: light-dark(var(--muted-light), var(--muted-dark));
    --muted-foreground: light-dark(var(--muted-foreground-light), var(--muted-foreground-dark));
    --accent: light-dark(var(--accent-light), var(--accent-dark));
    --accent-foreground: light-dark(var(--accent-foreground-light), var(--accent-foreground-dark));
    --destructive: light-dark(var(--destructive-light), var(--destructive-dark));
    --destructive-foreground: light-dark(var(--destructive-foreground-light), var(--destructive-foreground-dark));
    --border: light-dark(var(--border-light), var(--border-dark));
    --input: light-dark(var(--input-light), var(--input-dark));
    --ring: light-dark(var(--ring-light), var(--ring-dark));
    --chart-1: light-dark(var(--chart-1-light), var(--chart-1-dark));
    --chart-2: light-dark(var(--chart-2-light), var(--chart-2-dark));
    --chart-3: light-dark(var(--chart-3-light), var(--chart-3-dark));
    --chart-4: light-dark(var(--chart-4-light), var(--chart-4-dark));
    --chart-5: light-dark(var(--chart-5-light), var(--chart-5-dark));
    --sidebar: light-dark(var(--sidebar-light), var(--sidebar-dark));
    --sidebar-foreground: light-dark(var(--sidebar-foreground-light), var(--sidebar-foreground-dark));
    --sidebar-primary: light-dark(var(--sidebar-primary-light), var(--sidebar-primary-dark));
    --sidebar-primary-foreground: light-dark(var(--sidebar-primary-foreground-light), var(--sidebar-primary-foreground-dark));
    --sidebar-accent: light-dark(var(--sidebar-accent-light), var(--sidebar-accent-dark));
    --sidebar-accent-foreground: light-dark(var(--sidebar-accent-foreground-light), var(--sidebar-accent-foreground-dark));
    --sidebar-border: light-dark(var(--sidebar-border-light), var(--sidebar-border-dark));
    --sidebar-ring: light-dark(var(--sidebar-ring-light), var(--sidebar-ring-dark));
}

/* Scheme switches. Unset, the page's own color-scheme (light by default) applies. */
.light,
[data-theme="light"] {
    color-scheme: light;
}

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