/**
 * The design tokens. One block, two renderers, no shared markup.
 *
 * This file exists because two things had to land in the same wave and could
 * not land twice: the table language (docs/PLAN-2026-08-30-METRONIC-TABLE-
 * LANGUAGE.md) and the survey control layer (docs/PLAN-2026-08-30-CUSTOMER-
 * SURVEYS.md, Wave 2). `definition_version` is a version plus a CONTENT HASH,
 * so renaming a variant token re-exports every affected report definition —
 * doing tables now and controls later means paying that rename twice. So the
 * vocabulary is declared once, here, and `aieo-table.css` and
 * `aieo-controls.css` both consume it.
 *
 * 🚨 WE NEVER SHIP METRONIC. Its licence prohibits redistribution and forbids
 * open-source use; wp.org demands GPL. Nothing in this file is Metronic's code.
 * What IS taken is the vocabulary and the measured result: the token NAMES
 * (`primary / secondary / success / warning / destructive / info / mono`) and
 * the colours they resolve to, read from `@keenthemes/ktui` component source
 * and `config.ktui.css`, then re-expressed as our own declarations. That is a
 * design language, which is not copyrightable and is the thing the operator
 * asked for: "the similar if not identical look and feel", so one report
 * definition reads the same in wp-admin and in the Portal.
 *
 * THE NAMES ARE NOT REALLY METRONIC'S EITHER, which is why adopting them is the
 * opposite of lock-in: `primary/secondary/success/warning/destructive/info` is
 * the Bootstrap → Tailwind UI → shadcn lingua franca. It survives us replacing
 * Metronic.
 *
 * ── Two axes, deliberately not merged ────────────────────────────────────────
 *
 *   VARIANT  is UI INTENT and belongs to a control: a button, a badge, a row
 *            action. `--aieo-primary`, `--aieo-destructive`, …
 *   TONE     is about a VALUE and belongs to a data cell: a stale date, a
 *            negative figure, a dormant row. `--aieo-tone-*`.
 *
 * They are kept apart because they do not map: `primary` means nothing on a
 * number, and `muted` has no twin among the variants. Metronic reaches the same
 * split from the other direction and its own component source proves it —
 * BUTTONS carry intent (primary/secondary/destructive/outline/mono/dim/ghost),
 * BADGES carry status (those plus success/warning/info). There is no
 * `kt-btn-success` because a button is not a status.
 *
 * ⚠️ `destructive`, never `danger`. `danger` exists nowhere in KTUI and is the
 * name we are retiring on the variant axis. The tone axis keeps `danger`
 * because a bad NUMBER is not a destructive ACTION; that is the one place the
 * two words legitimately coexist, and it is a distinction, not a leftover.
 *
 * ── Dark mode is a token swap ────────────────────────────────────────────────
 *
 * `.dark` re-declares the same names and nothing else. wp-admin never sets it
 * today, so this ships invisible; the point is that turning it on later costs
 * one block rather than a second stylesheet. Deliberately NOT keyed on
 * `prefers-color-scheme`: an admin screen that went dark because the operating
 * system is dark, while the rest of wp-admin stayed light, is a regression.
 *
 * Colours are hex rather than the `oklch()` Tailwind 4 emits, because this
 * loads inside wp-admin next to core stylesheets and a token that fails to
 * parse resolves to nothing at all. Source values noted per line.
 *
 * @since 11.1.7
 */

:root {
	/* ── Surfaces ────────────────────────────────────────────────────── */
	--aieo-background: #ffffff;
	--aieo-foreground: #09090b;             /* zinc-950 */
	--aieo-card: #ffffff;
	--aieo-card-fg: #09090b;                /* zinc-950 */
	--aieo-muted: #f4f4f5;                  /* zinc-100 */
	--aieo-muted-fg: #71717a;               /* zinc-500 */
	--aieo-accent: #f4f4f5;                 /* zinc-100 */
	--aieo-accent-fg: #18181b;              /* zinc-900 */
	--aieo-border: #ececee;                 /* oklch(94% .004 286.32) */
	--aieo-input: #e4e4e7;                  /* zinc-200 */
	--aieo-ring: #a1a1aa;                   /* zinc-400 */

	/* ── Shape and rhythm ───────────────────────────────────────────── */
	--aieo-radius: 0.5rem;
	--aieo-radius-sm: 0.25rem;
	--aieo-radius-md: 0.375rem;
	--aieo-radius-lg: 0.5rem;
	--aieo-radius-pill: 999px;
	--aieo-text-2xs: 11px;
	--aieo-text-xs: 12px;
	--aieo-text-sm: 13px;
	--aieo-text-base: 14px;

	/* ── Variants, solid. The pair a filled control paints with. ─────── */
	--aieo-primary: #3b82f6;                /* blue-500 */
	--aieo-primary-fg: #ffffff;
	--aieo-secondary: #f4f4f5;              /* zinc-100 */
	--aieo-secondary-fg: #18181b;           /* zinc-900 */
	--aieo-success: #22c55e;                /* green-500 */
	--aieo-success-fg: #ffffff;
	--aieo-warning: #facc15;                /* yellow-400 */
	--aieo-warning-fg: #ffffff;
	--aieo-destructive: #dc2626;            /* red-600 */
	--aieo-destructive-fg: #ffffff;
	--aieo-info: #8b5cf6;                   /* violet-500 */
	--aieo-info-fg: #ffffff;
	--aieo-mono: #09090b;                   /* zinc-950 */
	--aieo-mono-fg: #ffffff;

	/* ── Variants, soft. KTUI calls this appearance `light`.
	 *
	 * This is the pair every badge in the product ALREADY used — the table's
	 * six inline schemes resolved to green-100/green-800 and friends long
	 * before this file existed. Naming it is what lets a badge and a button
	 * agree about what `success` means. ─────────────────────────────── */
	--aieo-primary-soft: #dbeafe;           /* blue-100 */
	--aieo-primary-soft-fg: #1e40af;        /* blue-800 */
	--aieo-secondary-soft: #f4f4f5;         /* zinc-100 */
	--aieo-secondary-soft-fg: #3f3f46;      /* zinc-700 */
	--aieo-success-soft: #dcfce7;           /* green-100 */
	--aieo-success-soft-fg: #166534;        /* green-800 */
	--aieo-warning-soft: #fef9c3;           /* yellow-100 */
	--aieo-warning-soft-fg: #854d0e;        /* yellow-800 */
	--aieo-destructive-soft: #fee2e2;       /* red-100 */
	--aieo-destructive-soft-fg: #991b1b;    /* red-800 */
	--aieo-info-soft: #ede9fe;              /* violet-100 */
	--aieo-info-soft-fg: #5b21b6;           /* violet-800 */
	--aieo-mono-soft: #f4f4f5;              /* zinc-100 */
	--aieo-mono-soft-fg: #18181b;           /* zinc-900 */

	/* ── Value tone. The other axis: what a FIGURE is, not what a control
	 * does. `danger` here is a bad number, not a destructive action. ──── */
	--aieo-tone-secondary: #52525b;         /* zinc-600 */
	--aieo-tone-muted: #a1a1aa;             /* zinc-400 */
	--aieo-tone-danger: #b91c1c;            /* red-700 */
	--aieo-tone-warning: #a16207;           /* yellow-700 */
	--aieo-tone-success: #166534;           /* green-800 */
	--aieo-tone-info: #6d28d9;              /* violet-700 */

	/* Tone, as a fill rather than as text: the bar a distribution draws. */
	--aieo-tone-danger-fill: #ef4444;       /* red-500 */
	--aieo-tone-warning-fill: #facc15;      /* yellow-400 */
	--aieo-tone-success-fill: #22c55e;      /* green-500 */
	--aieo-tone-info-fill: #8b5cf6;         /* violet-500 */

	/* Tone, as a row wash plus its left rule. A pale background alone does
	 * not survive being skimmed — the signals screen proved that when its
	 * dormant rows went unread — so the rule is part of the tone. */
	--aieo-tone-danger-wash: #fef2f2;       /* red-50 */
	--aieo-tone-warning-wash: #fefce8;      /* yellow-50 */
	--aieo-tone-success-wash: #f0fdf4;      /* green-50 */
	--aieo-tone-info-wash: #f5f3ff;         /* violet-50 */
}

/**
 * Dark. Same names, different values, nothing else.
 *
 * ⚠️ A method error worth not repeating, from the Panel's class audit: a
 * matched CSS rule is not an APPLIED rule. Every variant below has a light-mode
 * declaration above it; nothing gets its ONLY definition in here. The Panel had
 * `destructive` defined solely under `.dark` and 48 delete buttons rendered
 * solid primary blue in light mode, which read as "styled" rather than as the
 * worst bug on the page.
 */
.dark {
	--aieo-background: #09090b;             /* zinc-950 */
	--aieo-foreground: #fafafa;             /* zinc-50 */
	--aieo-card: #09090b;
	--aieo-card-fg: #fafafa;
	--aieo-muted: #18181b;                  /* zinc-900 */
	--aieo-muted-fg: #71717a;               /* zinc-500 */
	--aieo-accent: #18181b;                 /* zinc-900 */
	--aieo-accent-fg: #fafafa;              /* zinc-50 */
	--aieo-border: #27272a;                 /* zinc-800 */
	--aieo-input: #27272a;                  /* zinc-800 */
	--aieo-ring: #52525b;                   /* zinc-600 */

	--aieo-primary: #2563eb;                /* blue-600 */
	--aieo-primary-fg: #ffffff;
	--aieo-secondary: #27272a;              /* zinc-800 */
	--aieo-secondary-fg: #fafafa;           /* zinc-50 */
	--aieo-success: #22c55e;
	--aieo-success-fg: #ffffff;
	--aieo-warning: #facc15;
	--aieo-warning-fg: #09090b;
	--aieo-destructive: #dc2626;
	--aieo-destructive-fg: #ffffff;
	--aieo-info: #8b5cf6;
	--aieo-info-fg: #ffffff;
	--aieo-mono: #d4d4d8;                   /* zinc-300 */
	--aieo-mono-fg: #000000;

	--aieo-primary-soft: #172554;           /* blue-950 */
	--aieo-primary-soft-fg: #60a5fa;        /* blue-400 */
	--aieo-secondary-soft: #27272a;         /* zinc-800 */
	--aieo-secondary-soft-fg: #d4d4d8;      /* zinc-300 */
	--aieo-success-soft: #052e16;           /* green-950 */
	--aieo-success-soft-fg: #4ade80;        /* green-400 */
	--aieo-warning-soft: #422006;           /* yellow-950 */
	--aieo-warning-soft-fg: #facc15;        /* yellow-400 */
	--aieo-destructive-soft: #450a0a;       /* red-950 */
	--aieo-destructive-soft-fg: #f87171;    /* red-400 */
	--aieo-info-soft: #2e1065;              /* violet-950 */
	--aieo-info-soft-fg: #a78bfa;           /* violet-400 */
	--aieo-mono-soft: #27272a;              /* zinc-800 */
	--aieo-mono-soft-fg: #fafafa;           /* zinc-50 */

	--aieo-tone-secondary: #a1a1aa;         /* zinc-400 */
	--aieo-tone-muted: #52525b;             /* zinc-600 */
	--aieo-tone-danger: #f87171;            /* red-400 */
	--aieo-tone-warning: #facc15;           /* yellow-400 */
	--aieo-tone-success: #4ade80;           /* green-400 */
	--aieo-tone-info: #a78bfa;              /* violet-400 */

	--aieo-tone-danger-fill: #ef4444;
	--aieo-tone-warning-fill: #facc15;
	--aieo-tone-success-fill: #22c55e;
	--aieo-tone-info-fill: #8b5cf6;

	--aieo-tone-danger-wash: #1f1214;
	--aieo-tone-warning-wash: #1f1a0d;
	--aieo-tone-success-wash: #0d1a12;
	--aieo-tone-info-wash: #16121f;
}