/**
 * Default brand theme — Amara soft UI DESIGN.md tokens as CSS custom properties.
 *
 * Swap themes by loading another file under public/css/themes/ and setting
 * html[data-brand-theme="<name>"]. Light/dark shell remains html[data-theme].
 */

html[data-brand-theme='default'],
:root {
    /* ── Brand / primary (brand purple) ── */
    --amara-primary: #4666e1;
    --amara-primary-rgb: 70, 102, 225;
    --amara-primary-hover: #3852b4;
    --amara-primary-active: #2a3d87;
    --amara-primary-soft: #e8ecfb;
    --amara-primary-softer: #f3f5fd;
    --amara-primary-muted: #7a90e8;
    --amara-primary-10: rgba(70, 102, 225, 0.1);
    --amara-primary-20: rgba(70, 102, 225, 0.2);
    --amara-on-primary: #ffffff;

    /* ── Module accents ── */
    --ops: var(--amara-primary);

    /* ── Semantic (Amara soft UI) ── */
    --amara-success: #28adbb;
    --amara-success-soft: #e5f6f8;
    --amara-success-ink: #1f8a95;
    --amara-success-border: #b8e4e9;
    --amara-warning: #e1cd3c;
    --amara-warning-soft: #fbf8e3;
    --amara-warning-ink: #8a7d1f;
    --amara-warning-border: #f0e59a;
    --amara-danger: #e25867;
    --amara-danger-soft: #fbeaec;
    --amara-danger-ink: #b54652;
    --amara-danger-border: #f3c4c9;
    --amara-info: #55b0db;
    --amara-info-soft: #eaf5fb;
    --amara-info-ink: #3d8eb0;
    --amara-info-border: #b9dff0;

    /* ── Neutrals (brand gray scale) ── */
    --amara-gray-50: #f8f9fd;
    --amara-gray-100: #f8f9fd;
    --amara-gray-200: #eaedf1;
    --amara-gray-300: #d1d9e8;
    --amara-gray-400: #bfc8e0;
    --amara-gray-500: #adb7d8;
    --amara-gray-600: #8990b0;
    --amara-gray-700: #65688a;
    --amara-gray-800: #33405d;
    --amara-gray-900: #0d2042;

    /* ── Text ── */
    --amara-text-primary: #0d2042;
    --amara-text-secondary: #33405d;
    --amara-text-muted: #65688a;
    --amara-text-meta: #8990b0;
    --amara-text-inverse: #ffffff;
    --amara-ink: #0d2042;
    --amara-ink-secondary: #33405d;
    --amara-mute: #65688a;
    --amara-meta: #8990b0;

    /* ── Surfaces ── */
    --amara-canvas: #ffffff;
    --amara-surface: #ffffff;
    --amara-surface-raised: #f8f9fd;
    --amara-surface-muted: #f8f9fd;
    --amara-surface-subtle: #eaedf1;
    --amara-surface-overlay: rgba(13, 32, 66, 0.5);
    --amara-bg-page: #eaedf1;
    --amara-bg-page-alt: #f8f9fd;
    --amara-page-bg: #eaedf1;
    --amara-page-bg-alt: #f8f9fd;
    --amara-sidebar-bg: #ffffff;

    /* ── Borders ── */
    --amara-border: #d1d9e8;
    --amara-border-soft: #d1d9e8;
    --amara-border-light: #eaedf1;
    --amara-border-focus: var(--amara-primary);

    /* ── Hero (light light page title) ── */
    --amara-hero-bg-start: #f8f9fd;
    --amara-hero-bg-end: #ffffff;
    --amara-hero-accent: #4666e1;
    --amara-hero-title-accent: #4666e1;
    --amara-hero-dot: #28adbb;
    --amara-hero-btn-primary-mid: #6f5fe0;
    --amara-hero-radius: 12px;
    --amara-hero-btn-radius: 9.6px;

    /* ── Ops / estlist surfaces (soft cards) ── */
    --amara-estlist-surface: #f8f9fd;
    --amara-estlist-card: #ffffff;
    --amara-estlist-border: #d1d9e8;
    --amara-estlist-text: #0d2042;
    --amara-estlist-muted: #65688a;
    --amara-estlist-accent-bar-start: #4666e1;
    --amara-estlist-accent-bar-mid: #6f5fe0;
    --amara-estlist-accent-bar-end: #55b0db;
    --amara-ops-page-bg-start: #eaedf1;
    --amara-ops-page-bg-mid: #eaedf1;
    --amara-ops-page-bg-end: #eaedf1;
    --amara-filter-input-bg: #f8f9fd;
    --amara-ops-panel-radius: 12px;
    --amara-panel-radius: 12px;
    --amara-chip-radius: 9.6px;
    --amara-plate-radius: 6px;

    /* ── Spacing (4px base) ── */
    --amara-sp-1: 4px;
    --amara-sp-2: 8px;
    --amara-sp-3: 12px;
    --amara-sp-4: 16px;
    --amara-sp-5: 20px;
    --amara-sp-6: 24px;
    --amara-sp-8: 32px;
    --amara-sp-10: 40px;
    --amara-sp-12: 48px;
    --amara-sp-16: 64px;
    --amara-content-padding: 24px;
    --amara-content-max-width: 1600px;
    --amara-list-inset-min: 12px;
    --amara-list-inset-max: 24px;
    --amara-list-section-padding: 20px;
    --amara-list-card-padding: 20px;
    --amara-list-card-gap: 16px;

    /* ── Radii (Amara soft UI: 0.4 / 0.6 / 0.75 rem) ── */
    --amara-radius-sm: 4px;
    --amara-radius: 6.4px;
    --amara-radius-md: 9.6px;
    --amara-radius-lg: 12px;
    --amara-radius-xl: 12px;
    --amara-radius-2xl: 16px;
    --amara-radius-full: 9999px;
    --amara-radius-input: 9.6px;
    --amara-radius-btn: 9.6px;
    --amara-radius-strip: 0.75rem;
    --amara-radius-soft: 12px;
    --amara-radius-panel: 12px;

    /* ── Shadows (soft card / topbar) ── */
    --amara-shadow-xs: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.075);
    --amara-shadow-sm: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.075);
    --amara-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.075);
    --amara-shadow-md: 0 5px 12px rgba(13, 32, 66, 0.1);
    --amara-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
    --amara-shadow-xl: 0 15px 15px rgba(13, 32, 66, 0.2);
    --amara-shadow-soft: 0 5px 12px rgba(13, 32, 66, 0.1);
    --amara-shadow-focus: 0 0 0 3px var(--amara-primary-10);
    --amara-shadow-danger-focus: 0 0 0 3px rgba(226, 88, 103, 0.15);
    --amara-shadow-card: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.075);
    --amara-shadow-topbar: 0 4px 4px rgba(13, 32, 66, 0.12);

    /* ── Typography (Nunito / Amara soft UI 16px base) ── */
    --amara-font: Nunito, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
    --amara-font-mono: 'Courier New', Consolas, 'JetBrains Mono', 'Fira Code', monospace;
    --amara-text-xs: 0.75rem;
    --amara-text-sm: 0.875rem;
    --amara-text-base: 1rem;
    --amara-text-md: 1.0625rem;
    --amara-text-lg: 1.125rem;
    --amara-text-xl: 1.25rem;
    --amara-text-2xl: 1.5rem;
    --amara-text-3xl: 1.75rem;
    --amara-text-4xl: 2rem;
    --amara-leading-tight: 1.3;
    --amara-leading-normal: 1.5;
    --amara-leading-relaxed: 1.625;

    /* ── Layout chrome (Amara soft UI) ── */
    --amara-sidebar-width: 295px;
    --amara-sidebar-mini: 44px;
    --amara-header-height: 70px;
    --amara-layout-offset: 295px;
    --amara-z-dropdown: 100;
    --amara-z-sticky: 200;
    --amara-z-header: 300;
    --amara-z-sidebar: 400;
    --amara-z-overlay: 500;
    --amara-z-modal: 600;
    --amara-z-toast: 700;
    --amara-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --amara-transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);
    --amara-transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);

    /* ── Compat aliases used by legacy-master-ui.css ── */
    --bg: var(--amara-page-bg);
    --surface: var(--amara-surface);
    --surface-2: var(--amara-surface-muted);
    --surface-3: var(--amara-surface-subtle);
    --border: var(--amara-border-soft);
    --border-light: var(--amara-border-light);
    --text-1: var(--amara-gray-900);
    --text-2: var(--amara-text-secondary);
    --text-3: var(--amara-meta);
    --blue: var(--amara-primary);
    --blue-soft: var(--amara-primary-soft);
    --blue-muted: var(--amara-primary-muted);

}

/* Dark theme — navy canvas, raised cards; same light-title structure */
html[data-theme='dark'] {
    color-scheme: dark;

    --amara-page-bg: #0d2042;
    --amara-bg-page: #0d2042;
    --amara-page-bg-alt: #192b4b;
    --amara-bg-page-alt: #192b4b;

    --amara-estlist-surface: #192b4b;
    --amara-surface-raised: #192b4b;
    --amara-surface-muted: #192b4b;
    --amara-gray-50: #192b4b;
    --amara-gray-100: #192b4b;
    --amara-gray-200: #253655;
    --amara-gray-300: #33405d;
    --amara-gray-400: #3d4d68;
    --amara-gray-500: #adb7d8;
    --amara-gray-600: #d1d9e8;
    --amara-gray-700: #eaedf1;
    --amara-gray-800: #f3f5fd;
    --amara-gray-900: #f8f9fd;

    --amara-estlist-card: #253655;
    --amara-canvas: #253655;
    --amara-surface: #192b4b;
    --amara-sidebar-bg: #192b4b;
    --amara-surface-subtle: #0a1a35;
    --amara-surface-overlay: rgba(10, 26, 53, 0.72);
    --amara-filter-input-bg: #253655;

    --amara-border: #33405d;
    --amara-border-soft: #33405d;
    --amara-border-light: #3d4d68;
    --amara-estlist-border: #33405d;
    --amara-success-border: rgba(40, 173, 187, 0.45);
    --amara-warning-border: rgba(225, 205, 60, 0.4);
    --amara-danger-border: rgba(226, 88, 103, 0.45);
    --amara-info-border: rgba(85, 176, 219, 0.45);

    --amara-ink: #f8f9fd;
    --amara-ink-secondary: #eaedf1;
    --amara-text-primary: #f8f9fd;
    --amara-text-secondary: #eaedf1;
    --amara-mute: #d1d9e8;
    --amara-text-muted: #d1d9e8;
    --amara-meta: #adb7d8;
    --amara-estlist-text: #f8f9fd;
    --amara-estlist-muted: #d1d9e8;
    --amara-text-inverse: #0d2042;
    --amara-on-primary: #ffffff;

    --amara-hero-bg-start: #192b4b;
    --amara-hero-bg-end: #253655;

    --amara-primary-soft: rgba(70, 102, 225, 0.22);
    --amara-primary-softer: rgba(70, 102, 225, 0.12);
    --amara-success-soft: rgba(40, 173, 187, 0.18);
    --amara-warning-soft: rgba(225, 205, 60, 0.16);
    --amara-danger-soft: rgba(226, 88, 103, 0.18);
    --amara-info-soft: rgba(85, 176, 219, 0.18);

    --amara-success-ink: #7ad4dd;
    --amara-warning-ink: #f0e59a;
    --amara-danger-ink: #f0a0a8;
    --amara-info-ink: #8ecceb;

    --amara-shadow-xs: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.28);
    --amara-shadow-sm: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.32);
    --amara-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.32);
    --amara-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.45);
    --amara-shadow-xl: 0 15px 15px rgba(0, 0, 0, 0.4);
    --amara-shadow-card: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.35);
    --amara-shadow-md: 0 5px 12px rgba(0, 0, 0, 0.35);
    --amara-shadow-soft: 0 5px 12px rgba(0, 0, 0, 0.35);
    --amara-shadow-topbar: 0 4px 4px rgba(0, 0, 0, 0.35);
    --amara-shadow-focus: 0 0 0 3px var(--amara-primary-20);
    --amara-shadow-danger-focus: 0 0 0 3px rgba(226, 88, 103, 0.28);

    --amara-ops-page-bg-start: #0d2042;
    --amara-ops-page-bg-mid: #0d2042;
    --amara-ops-page-bg-end: #0d2042;

    --bg: var(--amara-page-bg);
    --surface: var(--amara-surface);
    --surface-2: var(--amara-surface-muted);
    --surface-3: var(--amara-surface-subtle);
    --border: var(--amara-border-soft);
    --border-light: var(--amara-border-light);
    --text-1: var(--amara-ink);
    --text-2: var(--amara-ink-secondary);
    --text-3: var(--amara-meta);

    --bs-body-bg: var(--amara-page-bg);
    --bs-body-color: var(--amara-ink);
    --bs-body-color-rgb: 248, 249, 253;
    --bs-body-bg-rgb: 13, 32, 66;
    --bs-emphasis-color: var(--amara-ink);
    --bs-secondary-color: var(--amara-mute);
    --bs-tertiary-bg: var(--amara-surface-muted);
    --bs-tertiary-color: var(--amara-meta);
    --bs-border-color: var(--amara-border);
    --bs-border-color-translucent: rgba(61, 77, 104, 0.5);
    --bs-heading-color: var(--amara-ink);
    --bs-link-color: var(--amara-primary-muted);
    --bs-link-hover-color: var(--amara-primary);
    --bs-code-color: var(--amara-primary-muted);
    --bs-highlight-bg: var(--amara-warning-soft);
    --bs-form-valid-color: var(--amara-success-ink);
    --bs-form-invalid-color: var(--amara-danger-ink);
}