/*
   The theme on the brand (plan CORE §3.8, CORE-D11; the family's mapping, as TuteCampus's resources/css/brand.css).

   shadcn-vue's variables and the family's own roles, mapped onto the brand's tokens, which <x-brand-tokens /> writes
   on every page from config/brand.php (App\Support\Brand\Palette: --brand-<colour>, --brand-light-<token>,
   --brand-dark-<token>, each with a -rgb twin for rgba()). This file writes no colour of its own (BrandGuardTest):
   a new brand colour in .env reaches every shade without a rebuild.
*/

:root,
[data-theme='light'] {
    --background: var(--brand-light-bg);
    --foreground: var(--brand-light-text-1);
    --card: var(--brand-light-surface);
    --card-foreground: var(--brand-light-text-1);
    --popover: var(--brand-light-surface);
    --popover-foreground: var(--brand-light-text-1);
    --primary: var(--brand-light-accent);
    --primary-foreground: var(--brand-light-on-accent);
    --primary-strong: var(--brand-light-accent-strong);
    --secondary: var(--brand-light-surface-2);
    --secondary-foreground: var(--brand-light-text-1);
    --muted: var(--brand-light-surface-2);
    --muted-foreground: var(--brand-light-text-2);
    --accent: var(--brand-light-surface-hover);
    --accent-foreground: var(--brand-light-text-1);
    --destructive: var(--brand-light-error);
    --destructive-foreground: var(--brand-light-surface);
    --border: var(--brand-light-border);
    --input: var(--brand-light-border-strong);
    --ring: var(--brand-light-accent);
    --placeholder: var(--brand-light-placeholder);

    --sidebar-background: var(--brand-light-sidebar-bg);
    --sidebar: var(--brand-light-sidebar-bg);
    --sidebar-foreground: var(--brand-light-nav);
    --sidebar-primary: var(--brand-light-accent);
    --sidebar-primary-foreground: var(--brand-light-on-accent);
    --sidebar-accent: rgba(var(--brand-light-accent-rgb), 0.07);
    --sidebar-accent-foreground: var(--brand-light-nav-active);
    --sidebar-border: var(--brand-light-border);
    --sidebar-ring: var(--brand-light-accent);

    --quiet: var(--brand-light-text-3);
    --success: var(--brand-light-success);
    --warning: var(--brand-light-warning);
    --info: var(--brand-light-info);
    --slate: var(--brand-light-slate);
    --hero: var(--brand-light-hero);
    --hero-2: var(--brand-light-hero-2);
    --hero-accent: var(--brand-light-hero-accent);
    --shade-rgb: var(--brand-light-shade-rgb);
    --shadow-card:
        0 1px 2px rgba(var(--brand-light-shade-rgb), 0.04),
        0 4px 16px rgba(var(--brand-light-shade-rgb), 0.04);
    --shadow-raised: 0 10px 34px rgba(var(--brand-light-shade-rgb), 0.12);
    color-scheme: light;
}

[data-theme='dark'] {
    --background: var(--brand-dark-bg);
    --foreground: var(--brand-dark-text-1);
    --card: var(--brand-dark-surface);
    --card-foreground: var(--brand-dark-text-1);
    --popover: var(--brand-dark-surface-2);
    --popover-foreground: var(--brand-dark-text-1);
    --primary: var(--brand-dark-accent);
    --primary-foreground: var(--brand-dark-on-accent);
    --primary-strong: var(--brand-dark-accent-strong);
    --secondary: var(--brand-dark-surface-2);
    --secondary-foreground: var(--brand-dark-text-1);
    --muted: var(--brand-dark-surface-2);
    --muted-foreground: var(--brand-dark-text-2);
    --accent: var(--brand-dark-surface-hover);
    --accent-foreground: var(--brand-dark-text-1);
    --destructive: var(--brand-dark-error);
    --destructive-foreground: var(--brand-dark-bg);
    --border: var(--brand-dark-border);
    --input: var(--brand-dark-border-strong);
    --ring: var(--brand-dark-accent);
    --placeholder: var(--brand-dark-placeholder);

    --sidebar-background: var(--brand-dark-sidebar-bg);
    --sidebar: var(--brand-dark-sidebar-bg);
    --sidebar-foreground: var(--brand-dark-nav);
    --sidebar-primary: var(--brand-dark-accent);
    --sidebar-primary-foreground: var(--brand-dark-on-accent);
    --sidebar-accent: rgba(var(--brand-dark-accent-rgb), 0.1);
    --sidebar-accent-foreground: var(--brand-dark-nav-active);
    --sidebar-border: var(--brand-dark-border);
    --sidebar-ring: var(--brand-dark-accent);

    --quiet: var(--brand-dark-text-3);
    --success: var(--brand-dark-success);
    --warning: var(--brand-dark-warning);
    --info: var(--brand-dark-info);
    --slate: var(--brand-dark-slate);
    --hero: var(--brand-dark-hero);
    --hero-2: var(--brand-dark-hero-2);
    --hero-accent: var(--brand-dark-hero-accent);
    --shade-rgb: var(--brand-dark-shade-rgb);
    --shadow-card:
        0 1px 2px rgba(var(--brand-dark-shade-rgb), 0.3),
        0 4px 16px rgba(var(--brand-dark-shade-rgb), 0.25);
    --shadow-raised: 0 12px 38px rgba(var(--brand-dark-shade-rgb), 0.5);
    color-scheme: dark;
}

/* Artwork in both tones (BrandLogo.vue): the file for the ground shown, the other hidden. */
[data-theme='dark'] .brand-tone-light,
[data-theme='light'] .brand-tone-dark,
:root:not([data-theme]) .brand-tone-dark {
    display: none;
}