/* MailNuts UI Theme Variables
   Aligned to the MailNuts Design System (claude.ai/design):
   Brand anchor #2864AE (logo disc) · Sky accent #4CBFEF · dark-first slate neutrals.
   IBM Plex Sans/Mono (UI) · Montserrat Alternates (brand wordmark).

   The existing semantic token names (--primary, --background, --surface, --text ...)
   are preserved so every component keeps working — only their VALUES change to the
   brand palette. Design-system token names (--bg-app, --accent, --brand-N, --space-N
   ...) are added alongside as aliases for new work.

   NOTE: the IBM Plex / Montserrat Alternates fonts are loaded via a font link in
   App.razor's head, not a CSS import here.
*/

/* ============================================================
   DARK THEME (default)
   ============================================================ */
:root,
[data-theme="dark"] {
    /* ---- Raw brand scales (design-system) ---- */
    --brand-50:#EAF1FB; --brand-100:#D2E2F5; --brand-200:#A6C6EA; --brand-300:#6FA0D9;
    --brand-400:#4385CC; --brand-500:#2E6CB8; --brand-600:#2864AE; --brand-700:#21528F;
    --brand-800:#1B4274; --brand-900:#163457;
    --sky-300:#7AD2F4; --sky-400:#4CBFEF; --sky-500:#2BA6E0;
    --green-400:#3FC38A; --green-500:#2FAE78; --green-600:#259466;
    --red-400:#EC6A62; --red-500:#E0514A; --red-600:#C53F3A;
    --amber-400:#E8B055; --amber-500:#DD9B33; --amber-600:#C0821F;
    --violet-500:#8B7CF0;
    --slate-0:#0A0E14; --slate-50:#0E131B; --slate-100:#11161F; --slate-150:#141A24;
    --slate-200:#161C27; --slate-250:#1B2230; --slate-300:#232C3A; --slate-400:#2E3A4C;
    --slate-500:#3C4A5E; --slate-600:#5E6B7E; --slate-700:#8794A6; --slate-800:#9AA6B8;
    --slate-900:#C2CBD8; --slate-950:#E6EAF2; --white:#FFFFFF;

    /* ---- Primary / interactive (legacy names → brand) ---- */
    --primary: #2E6CB8;
    --primary-hover: #4385CC;
    --primary-muted: rgba(46, 108, 184, 0.16);
    --secondary: #4CBFEF;
    --secondary-hover: #7AD2F4;

    /* ---- Backgrounds / surfaces ---- */
    --background: #0A0E14;
    --surface: #11161F;
    --surface-alt: #161C27;
    --sidebar-bg: #0E131B;
    --overlay: rgba(6, 10, 16, 0.72);

    /* ---- Text ---- */
    --text: #E6EAF2;
    --text-secondary: #9AA6B8;
    --text-muted: #5E6B7E;
    --text-inverted: #FFFFFF;

    /* ---- Borders ---- */
    --border: #232C3A;
    --border-hover: #2E3A4C;
    --border-focus: #4385CC;

    /* ---- Status ---- */
    --success: #2FAE78;
    --success-bg: rgba(47, 174, 120, 0.15);
    --warning: #DD9B33;
    --warning-bg: rgba(221, 155, 51, 0.15);
    --error: #E0514A;
    --error-bg: rgba(224, 81, 74, 0.15);
    --info: #4385CC;
    --info-bg: rgba(67, 133, 204, 0.15);

    /* ---- Chart series ---- */
    --chart-1: #4385CC;
    --chart-2: #4CBFEF;
    --chart-3: #2FAE78;
    --chart-4: #DD9B33;
    --chart-5: #8B7CF0;
    --chart-6: #7AD2F4;
    --chart-7: #EC6A62;
    --chart-8: #3FC38A;

    /* ---- Shadows (deep, tuned for dark) ---- */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.40), 0 1px 1px rgba(0, 0, 0, 0.30);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.50);

    /* ---- Transitions ---- */
    --transition-fast: 120ms ease;
    --transition-normal: 180ms ease;
    --transition-slow: 280ms ease;

    /* ---- Border radius (design scale) ---- */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 10px;
    --radius-xl: 14px;
    --radius-full: 9999px;

    /* ---- Spacing (legacy rem scale, kept) ---- */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;

    /* ---- Typography ---- */
    --font-family: 'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
    --font-brand: 'Montserrat Alternates', var(--font-family);
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-md: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;

    /* ---- Layout ---- */
    --sidebar-width: 236px;
    --sidebar-rail-width: 64px;
    --sidebar-collapsed-width: 64px;
    --header-height: 56px;
    --content-max-width: 1320px;

    /* ============================================================
       Design-system token aliases (for new components / parity
       with the auth pages). Map onto the values above.
       ============================================================ */
    --bg-app: var(--background);
    --surface-raised: var(--surface-alt);
    --surface-sunken: var(--sidebar-bg);
    --surface-hover: #1B2230;
    --surface-inset: #0C1016;

    --border-subtle: #1A212C;
    --border-strong: var(--slate-400);

    --text-primary: var(--text);
    --text-faint: var(--slate-500);
    --text-on-brand: #FFFFFF;
    --text-link: var(--brand-300);

    --accent: var(--brand-500);
    --accent-hover: var(--brand-400);
    --accent-press: var(--brand-600);
    --accent-fg: #FFFFFF;
    --accent-soft-bg: rgba(46, 108, 184, 0.14);
    --accent-soft-fg: var(--brand-300);
    --ring: rgba(67, 133, 204, 0.45);

    --success-soft: rgba(47, 174, 120, 0.15); --success-fg: var(--green-400);
    --danger: var(--red-500); --danger-soft: rgba(224, 81, 74, 0.15); --danger-fg: var(--red-400);
    --warning-soft: rgba(221, 155, 51, 0.15); --warning-fg: var(--amber-400);
    --info-soft: rgba(67, 133, 204, 0.15); --info-fg: var(--brand-300);

    --series-1: var(--brand-400); --series-2: var(--sky-400); --series-3: var(--green-500);
    --series-4: var(--amber-500); --series-5: var(--violet-500);

    /* px spacing scale (4px grid) */
    --space-0:0; --space-1:2px; --space-2:4px; --space-3:6px; --space-4:8px; --space-5:12px;
    --space-6:16px; --space-7:20px; --space-8:24px; --space-9:32px; --space-10:40px;
    --space-11:48px; --space-12:64px; --space-13:80px; --space-14:96px; --space-15:128px;

    /* px type scale + roles */
    --text-2xs:11px; --text-xs:12px; --text-sm:13px; --text-base:14px; --text-md:15px;
    --text-lg:16px; --text-xl:18px; --text-2xl:22px; --text-3xl:28px; --text-4xl:36px;
    --text-5xl:48px; --text-6xl:60px;
    --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700;
    --lh-tight:1.15; --lh-snug:1.3; --lh-normal:1.5; --lh-relaxed:1.65;
    --tracking-tighter:-0.02em; --tracking-tight:-0.01em; --tracking-normal:0;
    --tracking-wide:0.02em; --tracking-label:0.08em;

    /* extra radii + effects */
    --radius-xs:4px; --radius-2xl:20px;
    --shadow-xs: 0 1px 2px rgba(0,0,0,0.35);
    --shadow-xl: 0 24px 60px rgba(0,0,0,0.58);
    --shadow-focus: 0 0 0 3px var(--ring);
    --edge-highlight: inset 0 1px 0 rgba(255,255,255,0.04);
    --grad-brand: linear-gradient(135deg, #2865AF 0%, #4CBFEF 100%);
    --grad-brand-soft: linear-gradient(135deg, rgba(40,101,175,0.18), rgba(76,191,239,0.10));
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
    --dur-fast:120ms; --dur-base:180ms; --dur-slow:280ms;

    /* layout aliases */
    --sidebar-w: var(--sidebar-width);
    --sidebar-w-collapsed: var(--sidebar-rail-width);
    --topbar-h: var(--header-height);
    --content-max: var(--content-max-width);
    --gutter: 24px;

    color-scheme: dark;
}

/* ============================================================
   LIGHT THEME
   ============================================================ */
[data-theme="light"] {
    --primary: #2864AE;
    --primary-hover: #2E6CB8;
    --primary-muted: rgba(40, 100, 174, 0.10);
    --secondary: #2BA6E0;
    --secondary-hover: #2E6CB8;

    --background: #F6F8FB;
    --surface: #FFFFFF;
    --surface-alt: #FFFFFF;
    --sidebar-bg: #FFFFFF;
    --overlay: rgba(22, 32, 46, 0.45);

    --text: #16202E;
    --text-secondary: #43526A;
    --text-muted: #6B7888;
    --text-inverted: #FFFFFF;

    --border: #DCE3EC;
    --border-hover: #C6D0DC;
    --border-focus: #2864AE;

    --success: #259466; --success-bg: rgba(47, 174, 120, 0.12);
    --warning: #C0821F; --warning-bg: rgba(221, 155, 51, 0.14);
    --error: #C53F3A; --error-bg: rgba(224, 81, 74, 0.12);
    --info: #2864AE; --info-bg: rgba(40, 100, 174, 0.10);

    --shadow-sm: 0 1px 2px rgba(16, 32, 46, 0.06);
    --shadow-md: 0 4px 12px rgba(16, 32, 46, 0.08);
    --shadow-lg: 0 12px 32px rgba(16, 32, 46, 0.12);

    /* design aliases — light overrides */
    --surface-hover: #F0F4F9;
    --surface-inset: #F2F5F9;
    --border-subtle: #E7ECF3;
    --border-strong: #C6D0DC;
    --text-primary: var(--text);
    --text-faint: #93A0B0;
    --text-link: var(--brand-600);
    --accent: var(--brand-600);
    --accent-hover: var(--brand-500);
    --accent-press: var(--brand-700);
    --accent-soft-bg: rgba(40, 100, 174, 0.10);
    --accent-soft-fg: var(--brand-700);
    --ring: rgba(40, 100, 174, 0.30);
    --success-soft: rgba(47,174,120,0.12); --success-fg: var(--green-600);
    --danger: var(--red-600); --danger-soft: rgba(224,81,74,0.12); --danger-fg: var(--red-600);
    --warning-soft: rgba(221,155,51,0.14); --warning-fg: var(--amber-600);
    --info-soft: rgba(40,100,174,0.10); --info-fg: var(--brand-700);
    --edge-highlight: inset 0 1px 0 rgba(255,255,255,0.6);

    color-scheme: light;
}

/* ============================================================
   Global reset and base styles
   ============================================================ */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-family: var(--font-family);
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    background-color: var(--background);
    color: var(--text);
    min-height: 100vh;
}

/* Focus styles */
:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* Scrollbar styling (WebKit) */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--slate-400);
    border-radius: var(--radius-full);
    border: 2px solid transparent;
    background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--slate-500);
}

/* Selection */
::selection {
    background: var(--accent-soft-bg);
    color: var(--text);
}

/* Links */
a {
    color: var(--text-link);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--primary-hover);
}

/* Code */
code, pre {
    font-family: var(--font-mono);
    font-size: var(--font-size-sm);
}

code {
    background: var(--surface-alt);
    padding: 0.125rem 0.375rem;
    border-radius: var(--radius-sm);
}

pre {
    background: var(--surface-alt);
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    overflow-x: auto;
}

pre code {
    background: transparent;
    padding: 0;
}

/* Utility classes */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.text-muted { color: var(--text-muted); }
.text-secondary { color: var(--text-secondary); }
.text-success { color: var(--success); }
.text-warning { color: var(--warning); }
.text-error { color: var(--error); }
.text-info { color: var(--info); }