@property --theme-bg-primary {
    syntax: "<color>";
    inherits: true;
    initial-value: #ffffff;
}

@property --theme-text-primary {
    syntax: "<color>";
    inherits: true;
    initial-value: #1a1a1a;
}

@property --theme-surface-card {
    syntax: "<color>";
    inherits: true;
    initial-value: #f8f9fa;
}

@property --theme-border-subtle {
    syntax: "<color>";
    inherits: true;
    initial-value: #e2e8f0;
}

@property --theme-accent-brand {
    syntax: "<color>";
    inherits: true;
    initial-value: #2563eb;
}

@property --theme-accent-secondary {
    syntax: "<color>";
    inherits: true;
    initial-value: #64748b;
}

@property --theme-on-accent {
    syntax: "<color>";
    inherits: true;
    initial-value: #ffffff;
}

/* The ready class is added after the first paint, so the opening theme does not fade in. */
html.theme-ready {
    transition:
        --theme-bg-primary 0.3s ease,
        --theme-text-primary 0.3s ease,
        --theme-surface-card 0.3s ease,
        --theme-border-subtle 0.3s ease,
        --theme-accent-brand 0.3s ease,
        --theme-accent-secondary 0.3s ease,
        --theme-on-accent 0.3s ease;
}

:root {
    /* Product name shown in the shell, dashboard heading, and password recovery. */
    --brand-name: "GG Engineering Suite";

    /* Same stack the application already uses. */
    --font-family-primary: "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-family-secondary: "Helvetica Neue", Helvetica, Arial, sans-serif;

    /* Matches the current Bootstrap button radius and the 0.5rem control gap. */
    --border-radius-btn: 0.375rem;
    --spacing-unit: 0.5rem;

    /* Current partner logo referenced by the login and signup pages. */
    --logo-url: url("/images/GatherGates-Logo.png");

    /* SEMANTIC BASE WITH FALLBACKS (Always reference these in components) */
    --theme-bg-primary: #ffffff;        /* LIGHT FALLBACK */
    --theme-text-primary: #1a1a1a;
    --theme-surface-card: #f8f9fa;
    --theme-border-subtle: #e2e8f0;
    --theme-accent-brand: #2563eb;
    --theme-accent-secondary: #64748b;
    --theme-on-accent: #ffffff;
    --theme-status-danger: #9f1239;
    --theme-status-success: #166534;
    --theme-status-warning: #9a3412;
    --theme-status-info: #1e3a8a;

    --color-bg-primary: var(--theme-bg-primary);
    --color-text-primary: var(--theme-text-primary);
    --color-surface-card: var(--theme-surface-card);
    --color-border-subtle: var(--theme-border-subtle);
    --color-accent-brand: var(--theme-accent-brand);
    --color-accent-secondary: var(--theme-accent-secondary);
    --color-on-accent: var(--theme-on-accent);
    --color-status-danger: var(--theme-status-danger);
    --color-status-success: var(--theme-status-success);
    --color-status-warning: var(--theme-status-warning);
    --color-status-info: var(--theme-status-info);

    /* Existing brand aliases follow the active theme accent. */
    --primary-color: var(--color-accent-brand);
    --secondary-color: var(--color-accent-secondary);
    --accent-color: var(--color-accent-brand);
}

/* THEME 1: LIGHT (Enterprise Default) */
[data-theme="light"] {
    --theme-bg-primary: #ffffff;
    --theme-text-primary: #1a1a1a;
    --theme-surface-card: #f8f9fa;
    --theme-border-subtle: #e2e8f0;
    --theme-accent-brand: #2563eb;
    --theme-accent-secondary: #64748b;
    --theme-on-accent: #ffffff;
}

/* THEME 2: DARK (Standard Low-Light) */
[data-theme="dark"] {
    --theme-bg-primary: #0f172a;
    --theme-text-primary: #f1f5f9;
    --theme-surface-card: #1e293b;
    --theme-border-subtle: #334155;
    --theme-accent-brand: #3b82f6;
    --theme-accent-secondary: #94a3b8;
    /* Slate on this blue is 4.85:1. White on the same blue is 3.68:1. */
    --theme-on-accent: #0f172a;
    --theme-status-danger: #fecaca;
    --theme-status-success: #bbf7d0;
    --theme-status-warning: #fde68a;
    --theme-status-info: #bfdbfe;
}

/* THEME 3: PLUM (Sophisticated Women-Focused) */
[data-theme="plum"] {
    --theme-bg-primary: #fdf4ff;        /* Soft Lavender Base */
    --theme-text-primary: #4a044e;      /* Deep Plum Text (WCAG AA Compliant) */
    --theme-surface-card: #fae8ff;
    --theme-border-subtle: #f0abfc;
    --theme-accent-brand: #86198f;      /* Rich Plum Accent */
    --theme-accent-secondary: #6b21a8;  /* Deep Violet Secondary */
    --theme-on-accent: #ffffff;
}

/* THEME 4: BUBBLEGUM (SG/AU Trend - Playful Professional) */
[data-theme="bubblegum"] {
    --theme-bg-primary: #fff0f5;
    --theme-text-primary: #2d1b2e;
    --theme-surface-card: #ffe4e6;
    --theme-border-subtle: #fecdd3;
    --theme-accent-brand: #db2777;
    --theme-accent-secondary: #c026d3;
    --theme-on-accent: #ffffff;
}

/* THEME 5: DARK FOREST (Biophilic/Nature Trend) */
[data-theme="dark-forest"] {
    --theme-bg-primary: #052e16;
    --theme-text-primary: #ecfccb;
    --theme-surface-card: #064e3b;
    --theme-border-subtle: #065f46;
    --theme-accent-brand: #4ade80;
    --theme-accent-secondary: #22c55e;
    /* White on this green is 1.74:1. Deep forest text on the green is 8.55:1. */
    --theme-on-accent: #052e16;
    --theme-status-danger: #fecaca;
    --theme-status-success: #bbf7d0;
    --theme-status-warning: #fde68a;
    --theme-status-info: #d9f99d;
}

.theme-swatch {
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 50%;
    display: inline-block;
    flex: 0 0 auto;
    border: 1px solid var(--color-border-subtle);
}

.theme-swatch-system {
    background-image: linear-gradient(90deg, #ffffff 50%, #0f172a 50%);
}
.theme-swatch-light { background-color: #2563eb; }
.theme-swatch-dark { background-color: #3b82f6; }
.theme-swatch-plum { background-color: #86198f; }
.theme-swatch-bubblegum { background-color: #db2777; }
.theme-swatch-dark-forest { background-color: #4ade80; }

.brand-name::before {
    content: var(--brand-name);
}

img.brand-logo {
    content: var(--logo-url);
}

.app-shell {
    font-family: var(--font-family-primary);
}