/* AeroForge Minimal SaaS — semantic foundation.
   Loaded AFTER legacy styles. The current theme selection is preserved.
   These aliases let old components adopt the palette without HTML/JS changes. */

:root {
    color-scheme: dark;

    --af-space-1: 4px;
    --af-space-2: 8px;
    --af-space-3: 12px;
    --af-space-4: 16px;
    --af-space-5: 20px;
    --af-space-6: 24px;
    --af-space-8: 32px;

    /* Shared mobile touch/control height for full-size form fields and actions. */
    --af-control-height: 44px;

    --af-radius-sm: 8px;
    --af-radius-md: 12px;
    --af-radius-lg: 16px;

    --af-canvas: #0d1422;
    --af-surface: #151e2e;
    --af-surface-raised: #1b2637;
    --af-control: #101827;
    --af-line: #2a374b;
    --af-line-strong: #41516a;
    --af-ink: #f1f5f9;
    --af-ink-muted: #b6c3d5;
    --af-ink-subtle: #91a1b8;
    --af-brand: #818cf8;
    --af-brand-hover: #6366f1;
    --af-brand-contrast: #111827;
    --af-brand-tint: rgba(129, 140, 248, 0.12);

    /* Primary SaaS CTAs remain solid indigo in either theme. */
    --af-action-primary: #4f46e5;
    --af-action-primary-hover: #4338ca;
    --af-action-on-primary: #ffffff;
    --af-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
    --af-focus: 0 0 0 3px rgba(129, 140, 248, 0.30);

    /* Unified Chart.js canvas palette — independent of dataset/engineering colors. */
    --af-chart-ink: #b6c3d5;
    --af-chart-grid: rgba(148, 163, 184, 0.16);
    --af-chart-tooltip-bg: #202c40;
    --af-chart-tooltip-ink: #f1f5f9;
    --af-chart-tooltip-border: #41516a;

    /* Compatibility aliases used by the existing application. */
    --bg-primary: var(--af-canvas);
    --bg-secondary: var(--af-surface);
    --bg-card: var(--af-surface);
    --bg-card-hover: var(--af-surface-raised);
    --bg-input: var(--af-control);
    --bg-header: var(--af-surface);
    --bg-panel: var(--af-surface);
    --bg-tertiary: var(--af-surface-raised);
    --bg-surface: var(--af-surface);
    --bg-surface-elevated: var(--af-surface-raised);
    --border-subtle: var(--af-line);
    --border-color: var(--af-line);
    --border-input: var(--af-line-strong);
    --border-focus: var(--af-brand);
    --accent: var(--af-brand);
    --accent-light: #a5b4fc;
    --accent-color: var(--af-brand);
    --accent-glow: var(--af-brand-tint);
    --text-primary: var(--af-ink);
    --text-secondary: var(--af-ink-muted);
    --text-muted: var(--af-ink-subtle);
    --text-heading: var(--af-ink);
    --shadow-card: var(--af-shadow);
    --shadow-glow: var(--af-focus);
    --surface: var(--af-surface);
    --text: var(--af-ink);
    --radius-sm: var(--af-radius-sm);
    --radius-md: var(--af-radius-md);
    --radius-lg: var(--af-radius-lg);
    --radius-xl: 20px;
    --transition: 0.18s ease;
}

html[data-theme="light"]:root {
    color-scheme: light;

    --af-canvas: #f7f8fb;
    --af-surface: #ffffff;
    --af-surface-raised: #f2f5fa;
    --af-control: #ffffff;
    --af-line: #e4e9f0;
    --af-line-strong: #cbd5e1;
    --af-ink: #172033;
    --af-ink-muted: #475569;
    --af-ink-subtle: #64748b;
    --af-brand: #4f46e5;
    --af-brand-hover: #4338ca;
    --af-brand-contrast: #ffffff;
    --af-brand-tint: rgba(79, 70, 229, 0.09);
    --af-shadow: 0 4px 18px rgba(21, 35, 56, 0.045);
    --af-focus: 0 0 0 3px rgba(79, 70, 229, 0.15);

    --af-chart-ink: #475569;
    --af-chart-grid: rgba(71, 85, 105, 0.18);
    --af-chart-tooltip-bg: #ffffff;
    --af-chart-tooltip-ink: #172033;
    --af-chart-tooltip-border: #cbd5e1;

    /* Landing's legacy light palette uses !important. Explicitly supersede it. */
    --bg-primary: var(--af-canvas) !important;
    --bg-secondary: var(--af-surface) !important;
    --bg-card: var(--af-surface) !important;
    --accent: var(--af-brand) !important;
    --accent-light: var(--af-brand) !important;
    --accent-glow: var(--af-brand-tint) !important;
    --text-primary: var(--af-ink) !important;
    --text-secondary: var(--af-ink-muted) !important;
    --text-muted: var(--af-ink-subtle) !important;
    --border-subtle: var(--af-line) !important;
    --text-heading: var(--af-ink);
}
