/* ══════════════════════════════════════════════════════════════
   ifinmail Design Tokens — ifinsta-aligned v2.0
   Palette: Navy #0F2B5B · Blue 600 #1A56DB · Gray scale
   Compact, Gmail-enterprise aesthetic. No decorative shadows.
   ══════════════════════════════════════════════════════════════ */

:root {
    /* ════════════════════════════════════════════════════════════
       §3 Color — Primary Token System
       ════════════════════════════════════════════════════════════ */
    --ifinmail-color-primary: #1A56DB;
    --ifinmail-color-primary-hover: #1648c0;
    --ifinmail-color-primary-tint: #E8F0FE;
    --ifinmail-color-primary-subtle: #F0F4FF;
    --ifinmail-color-primary-rgb: 26, 86, 219;

    --ifinmail-color-brand: #0F2B5B;
    /* Always-dark brand band (landing CTA): same in every theme except contrast */
    --ifinmail-band-bg: #0F2B5B;
    --ifinmail-on-band: #FFFFFF;

    --ifinmail-color-text-primary: #111827;
    --ifinmail-color-text-secondary: #374151;
    --ifinmail-color-text-muted: #656D7A;  /* 4.7:1 on surface-2 */

    --ifinmail-color-border: #D1D5DB;
    --ifinmail-color-border-light: #E5E7EB;
    --ifinmail-color-surface-2: #F3F4F6;
    --ifinmail-color-surface-1: #F9FAFB;
    --ifinmail-bg-grid-color: rgba(15, 43, 91, 0.03);

    --ifinmail-color-danger: #DC2626;
    --ifinmail-color-danger-tint: #FEE2E2;
    --ifinmail-color-warning: #D97706;
    --ifinmail-color-warning-tint: #FEF3C7;
    --ifinmail-color-success: #059669;
    --ifinmail-color-success-tint: #D1FAE5;
    /* Status text on tints: darker than the fills so pills clear 4.5:1 */
    --ifinmail-color-success-text: #047857;
    --ifinmail-color-warning-text: #B45309;
    --ifinmail-color-danger-text: #B91C1C;
    --ifinmail-color-info: #0284C7;
    --ifinmail-color-info-tint: #E0F2FE;

    /* ════════════════════════════════════════════════════════════
       Neutrals, overlays and patterns (so no literal colours leak
       into component CSS)
       ════════════════════════════════════════════════════════════ */
    --ifinmail-color-white: #FFFFFF;
    --ifinmail-color-black: #000000;
    --ifinmail-overlay-scrim: rgba(17, 24, 39, 0.5);
    --ifinmail-surface-glass: rgba(255, 255, 255, 0.85);
    --ifinmail-on-dark-muted: rgba(255, 255, 255, 0.8);
    --ifinmail-sheen: rgba(255, 255, 255, 0.4);
    --ifinmail-spinner-track-on-light: rgba(17, 24, 39, 0.15);
    --ifinmail-spinner-track-on-dark: rgba(255, 255, 255, 0.3);
    --ifinmail-focus-ring-danger: rgba(220, 38, 38, 0.16);
    --ifinmail-watermark: rgba(15, 23, 42, 0.04);
    --ifinmail-bg-grid-image:
        linear-gradient(var(--ifinmail-bg-grid-color) 1px, transparent 1px),
        linear-gradient(90deg, var(--ifinmail-bg-grid-color) 1px, transparent 1px);
    --ifinmail-bg-grid-size: 32px 32px;
    --ifinmail-chevron-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23656d7a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    --ifinmail-skeleton-shimmer: linear-gradient(90deg, transparent, var(--ifinmail-sheen), transparent);

    /* ════════════════════════════════════════════════════════════
       Working tokens (consumed by component CSS)
       ════════════════════════════════════════════════════════════ */
    --ifinmail-surface: var(--ifinmail-color-surface-1);
    --ifinmail-surface-bright: #ffffff;
    --ifinmail-surface-container-lowest: #ffffff;
    --ifinmail-surface-container-low: var(--ifinmail-color-surface-2);
    --ifinmail-surface-container: var(--ifinmail-color-surface-2);
    --ifinmail-surface-container-high: #E5E7EB;
    --ifinmail-surface-container-highest: #D1D5DB;
    --ifinmail-surface-dim: #d8dadc;
    --ifinmail-inverse-surface: #2D3133;
    --ifinmail-inverse-on-surface: #EFF1F3;

    --ifinmail-secondary: var(--ifinmail-color-primary);
    --ifinmail-on-secondary: #ffffff;
    --ifinmail-secondary-fixed: #DBE1FF;
    --ifinmail-secondary-fixed-dim: var(--ifinmail-color-primary-tint);
    --ifinmail-on-secondary-fixed: #00174B;
    --ifinmail-on-secondary-fixed-variant: #003EA8;

    --ifinmail-on-surface: var(--ifinmail-color-text-primary);
    --ifinmail-on-surface-variant: var(--ifinmail-color-text-secondary);
    --ifinmail-outline: var(--ifinmail-color-text-muted);
    --ifinmail-outline-variant: var(--ifinmail-color-border);

    /* Sidebar — ifinsta white pattern */
    --ifinmail-primary: var(--ifinmail-color-primary);
    --ifinmail-on-primary: #ffffff;
    --ifinmail-primary-container: #ffffff;
    --ifinmail-on-primary-container: var(--ifinmail-color-text-secondary);
    --ifinmail-primary-container-border: var(--ifinmail-color-border);
    --ifinmail-primary-container-hover: var(--ifinmail-color-surface-1);
    --ifinmail-primary-container-active: var(--ifinmail-color-primary-tint);

    /* Semantic */
    --ifinmail-error: var(--ifinmail-color-danger);
    --ifinmail-on-error: #ffffff;
    --ifinmail-error-container: var(--ifinmail-color-danger-tint);
    --ifinmail-on-error-container: #93000A;

    --ifinmail-success: var(--ifinmail-color-success);
    --ifinmail-success-container: var(--ifinmail-color-success-tint);
    --ifinmail-on-success-container: #002105;

    --ifinmail-warning: var(--ifinmail-color-warning);
    --ifinmail-warning-container: var(--ifinmail-color-warning-tint);
    --ifinmail-on-warning-container: #2D2000;

    /* Backward-compat aliases */
    --ifinmail-bg: var(--ifinmail-surface-container-lowest);
    --ifinmail-bg-secondary: var(--ifinmail-surface-container);
    --ifinmail-bg-tertiary: var(--ifinmail-surface-container-high);
    --ifinmail-text: var(--ifinmail-on-surface);
    --ifinmail-text-secondary: var(--ifinmail-on-surface-variant);
    --ifinmail-text-muted: var(--ifinmail-outline);
    --ifinmail-border-light: var(--ifinmail-outline-variant);
    --ifinmail-border: var(--ifinmail-outline-variant);
    --ifinmail-border-hover: var(--ifinmail-outline);
    --ifinmail-border-strong: var(--ifinmail-outline);
    --ifinmail-primary-hover: var(--ifinmail-color-primary-hover);
    --ifinmail-primary-light: var(--ifinmail-color-primary-tint);
    --ifinmail-danger: var(--ifinmail-color-danger);
    --ifinmail-danger-light: var(--ifinmail-color-danger-tint);
    --ifinmail-success-light: var(--ifinmail-color-success-tint);
    --ifinmail-warning-light: var(--ifinmail-color-warning-tint);

    /* ════════════════════════════════════════════════════════════
       §4 Typography — Inter + JetBrains Mono (ifinsta-aligned)
       ════════════════════════════════════════════════════════════ */
    --ifinmail-font-ui: 'Inter', -apple-system, BlinkMacSystemFont,
        'Segoe UI', Helvetica, Arial, sans-serif;
    --ifinmail-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono',
        Consolas, 'Liberation Mono', monospace;

    --ifinmail-font-weight-normal: 400;
    --ifinmail-font-weight-medium: 500;
    --ifinmail-font-weight-semibold: 600;
    --ifinmail-font-weight-bold: 700;

    --ifinmail-line-height: 1.45;
    --ifinmail-line-height-tight: 1.3;

    /* Type scale — compact enterprise (ifinsta-aligned) */
    --ifinmail-font-size-display: 1.375rem;    /* 22px */
    --ifinmail-font-size-page-title: 1.125rem; /* 18px — admin page titles */
    --ifinmail-font-size-h1: 1.125rem;         /* 18px */
    --ifinmail-font-size-h2: 0.9375rem;        /* 15px */
    --ifinmail-font-size-h3: 0.875rem;         /* 14px */
    --ifinmail-font-size-body-large: 0.875rem; /* 14px */
    --ifinmail-font-size-body: 0.8125rem;      /* 13px — default */
    --ifinmail-font-size-body-small: 0.75rem;  /* 12px */
    --ifinmail-font-size-label: 0.75rem;       /* 12px */
    --ifinmail-font-size-caption: 0.6875rem;   /* 11px */
    --ifinmail-font-size-overline: 0.6875rem;   /* 11px — Overline per §4 */
    --ifinmail-font-size-code: 0.8125rem;      /* 13px */

    /* Utility aliases */
    --ifinmail-font-size-xs: var(--ifinmail-font-size-caption);
    --ifinmail-font-size-sm: var(--ifinmail-font-size-body);
    --ifinmail-font-size-base: 0.9375rem;
    --ifinmail-font-size-lg: 1rem;
    --ifinmail-font-size-xl: var(--ifinmail-font-size-h2);
    --ifinmail-font-size-2xl: var(--ifinmail-font-size-h1);
    --ifinmail-font-size-3xl: var(--ifinmail-font-size-display);
    --ifinmail-font-size-4xl: 1.75rem;

    /* ════════════════════════════════════════════════════════════
       §5 Spacing — 4px base grid (ifinsta-aligned)
       ════════════════════════════════════════════════════════════ */
    --ifinmail-space-0_5: 0.125rem;  /* 2px */
    --ifinmail-space-1:   0.25rem;   /* 4px */
    --ifinmail-space-1_5: 0.375rem;  /* 6px */
    --ifinmail-space-2:   0.5rem;    /* 8px */
    --ifinmail-space-2_5: 0.625rem;  /* 10px */
    --ifinmail-space-3:   0.75rem;   /* 12px */
    --ifinmail-space-3_5: 0.875rem;  /* 14px */
    --ifinmail-space-4:   1rem;      /* 16px */
    --ifinmail-space-5:   1.25rem;   /* 20px */
    --ifinmail-space-6:   1.5rem;    /* 24px */
    --ifinmail-space-7:   1.75rem;   /* 28px */
    --ifinmail-space-8:   2rem;      /* 32px */
    --ifinmail-space-9:   2.25rem;   /* 36px */
    --ifinmail-space-10:  2.5rem;    /* 40px */
    --ifinmail-space-11:  2.75rem;   /* 44px */
    --ifinmail-space-12:  3rem;      /* 48px */
    --ifinmail-space-16:  4rem;      /* 64px */

    /* Layout tokens */
    --ifinmail-sidebar-width: 208px;
    --ifinmail-sidebar-rail-width: 52px;
    --ifinmail-container-max-width: 1280px;
    --ifinmail-gutter: 20px;
    --ifinmail-margin-mobile: 16px;
    --ifinmail-stack-gap: 12px;
    --ifinmail-section-gap: 20px;
    --ifinmail-header-height: 48px;
    --ifinmail-footer-height: 32px;

    /* Sidebar nav */
    --ifinmail-sidebar-nav-item-height: 32px;
    --ifinmail-sidebar-active-bg: #E8F0FE;
    --ifinmail-sidebar-active-color: #1A56DB;
    --ifinmail-sidebar-hover-bg: #F9FAFB;
    --ifinmail-sidebar-text: #374151;
    --ifinmail-sidebar-text-muted: #656D7A;

    /* ════════════════════════════════════════════════════════════
       Border Radii — compact enterprise
       ════════════════════════════════════════════════════════════ */
    --ifinmail-radius-sm: 0.125rem;   /* 2px */
    --ifinmail-radius-xs: 0.25rem;    /* 4px */
    --ifinmail-radius:    0.5rem;     /* 8px — buttons, inputs, cards */
    --ifinmail-radius-md: 0.5rem;     /* 8px */
    --ifinmail-radius-badge: 0.3125rem; /* 5px — pills */
    --ifinmail-radius-dialog: 0.75rem;  /* 12px — dialogs, auth cards */
    --ifinmail-radius-lg: 0.5rem;     /* 8px — panels, cards */
    --ifinmail-radius-xl: 0.5rem;     /* 8px */
    --ifinmail-radius-full: 9999px;

    /* ════════════════════════════════════════════════════════════
       §6 Elevation — no decorative shadows (ifinmail spec)
       ════════════════════════════════════════════════════════════ */
    --ifinmail-shadow-none: none;
    --ifinmail-shadow-1: none;
    /* Floating layers only (menus, dialogs). Cards never use these. */
    --ifinmail-shadow-2: 0 4px 12px rgba(0, 0, 0, 0.10), 0 2px 4px rgba(0, 0, 0, 0.06);
    --ifinmail-shadow-3: 0 8px 24px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.08);
    --ifinmail-shadow-4: none;
    --ifinmail-shadow-sm: none;
    --ifinmail-shadow-md: none;
    --ifinmail-shadow-lg: none;
    --ifinmail-shadow-xl: none;

    /* ════════════════════════════════════════════════════════════
       §8 Motion (ifinsta-aligned durations)
       ════════════════════════════════════════════════════════════ */
    --ifinmail-duration-fast: 100ms;
    --ifinmail-duration-normal: 150ms;
    --ifinmail-duration-slow: 250ms;
    --ifinmail-duration-deliberate: 350ms;
    --ifinmail-easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
    --ifinmail-easing-fluent: cubic-bezier(0, 0, 0, 1);

    --ifinmail-transition-fast: 100ms var(--ifinmail-easing-fluent);
    --ifinmail-transition: 150ms var(--ifinmail-easing-standard);
    --ifinmail-transition-slow: 250ms var(--ifinmail-easing-standard);

    /* ════════════════════════════════════════════════════════════
       Focus Ring — 2px blue outline
       ════════════════════════════════════════════════════════════ */
    --ifinmail-focus-ring-width: 2px;
    --ifinmail-focus-ring-color: var(--ifinmail-color-primary);
    --ifinmail-focus-ring-offset: 2px;

    /* ════════════════════════════════════════════════════════════
       Theme previews (Appearance cards). Fixed: each card shows its
       own theme whatever theme is active.
       ════════════════════════════════════════════════════════════ */
    --ifinmail-preview-light-bg: #F3F4F6;
    --ifinmail-preview-light-bar: #FFFFFF;
    --ifinmail-preview-light-btn: #1A56DB;
    --ifinmail-preview-dark-bg: #0B1220;
    --ifinmail-preview-dark-bar: #1F2937;
    --ifinmail-preview-dark-btn: #60A5FA;
    --ifinmail-preview-auto-bg: linear-gradient(90deg, var(--ifinmail-preview-light-bg) 50%, var(--ifinmail-preview-dark-bg) 50%);
    --ifinmail-preview-auto-bar: #9CA3AF;
    --ifinmail-preview-contrast-bg: #000000;
    --ifinmail-preview-contrast-bar: #FFD400;
    --ifinmail-preview-contrast-btn: #FFD400;
}

/* ══════════════════════════════════════════════════════════════
   Themes. ifinmail-theme-init.js sets html[data-scheme] to
   light | dark | contrast (data-theme holds the person's choice,
   which may be "auto"). Light is the :root default above.
   Only token values change here; component CSS stays untouched.
   ══════════════════════════════════════════════════════════════ */
html[data-scheme="dark"] {
    color-scheme: dark;

    --ifinmail-color-primary: #7BAAFF;
    --ifinmail-color-primary-hover: #9CBFFF;
    --ifinmail-color-primary-tint: rgba(123, 170, 255, 0.16);
    --ifinmail-color-primary-subtle: rgba(123, 170, 255, 0.08);
    --ifinmail-color-primary-rgb: 123, 170, 255;
    --ifinmail-color-brand: #E5ECFF;
    --ifinmail-band-bg: #14305F;

    --ifinmail-color-text-primary: #F3F4F6;
    --ifinmail-color-text-secondary: #D1D5DB;
    --ifinmail-color-text-muted: #9CA3AF;

    --ifinmail-color-border: #374151;
    --ifinmail-color-border-light: #263041;
    --ifinmail-color-surface-2: #1B2433;
    --ifinmail-color-surface-1: #0B1220;
    --ifinmail-bg-grid-color: rgba(255, 255, 255, 0.03);

    --ifinmail-color-danger: #F87171;
    --ifinmail-color-danger-tint: rgba(248, 113, 113, 0.16);
    --ifinmail-color-warning: #FBBF24;
    --ifinmail-color-warning-tint: rgba(251, 191, 36, 0.16);
    --ifinmail-color-success: #34D399;
    --ifinmail-color-success-tint: rgba(52, 211, 153, 0.16);
    --ifinmail-color-success-text: #6EE7B7;
    --ifinmail-color-warning-text: #FCD34D;
    --ifinmail-color-danger-text: #FCA5A5;
    --ifinmail-color-info: #38BDF8;
    --ifinmail-color-info-tint: rgba(56, 189, 248, 0.16);

    --ifinmail-overlay-scrim: rgba(0, 0, 0, 0.65);
    --ifinmail-surface-glass: rgba(17, 26, 43, 0.85);
    --ifinmail-on-dark-muted: rgba(255, 255, 255, 0.8);
    --ifinmail-sheen: rgba(255, 255, 255, 0.06);
    --ifinmail-spinner-track-on-light: rgba(255, 255, 255, 0.2);
    --ifinmail-focus-ring-danger: rgba(248, 113, 113, 0.3);
    --ifinmail-watermark: rgba(255, 255, 255, 0.04);
    --ifinmail-chevron-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");

    --ifinmail-surface-bright: #111A2B;
    --ifinmail-primary-container: #111A2B;
    --ifinmail-surface-container-lowest: #111A2B;
    --ifinmail-surface-container-high: #263041;
    --ifinmail-surface-container-highest: #374151;
    --ifinmail-surface-dim: #0B1220;
    --ifinmail-inverse-surface: #E5E7EB;
    --ifinmail-inverse-on-surface: #111827;

    --ifinmail-on-secondary: #0B1220;
    --ifinmail-secondary-fixed: #1E2A44;
    --ifinmail-on-secondary-fixed: #DBE1FF;
    --ifinmail-on-secondary-fixed-variant: #B6C8FF;
    --ifinmail-on-primary: #0B1220;
    --ifinmail-on-error: #0B1220;
    --ifinmail-on-error-container: #FCA5A5;
    --ifinmail-on-success-container: #A7F3D0;
    --ifinmail-on-warning-container: #FDE68A;

    --ifinmail-sidebar-active-bg: rgba(123, 170, 255, 0.16);
    --ifinmail-sidebar-active-color: #8DB6FF;
    --ifinmail-sidebar-hover-bg: #1B2433;
    --ifinmail-sidebar-text: #D1D5DB;
    --ifinmail-sidebar-text-muted: #9CA3AF;

    --ifinmail-shadow-2: 0 4px 12px rgba(0, 0, 0, 0.5), 0 2px 4px rgba(0, 0, 0, 0.4);
    --ifinmail-shadow-3: 0 8px 24px rgba(0, 0, 0, 0.55), 0 4px 8px rgba(0, 0, 0, 0.4);
}

/* High contrast: black ground, white text and borders, yellow accent */
html[data-scheme="contrast"] {
    color-scheme: dark;

    --ifinmail-color-primary: #FFD400;
    --ifinmail-color-primary-hover: #FFE766;
    --ifinmail-color-primary-tint: #2B2400;
    --ifinmail-color-primary-subtle: #1A1600;
    --ifinmail-color-primary-rgb: 255, 212, 0;
    --ifinmail-color-brand: #FFFFFF;
    --ifinmail-band-bg: #000000;

    --ifinmail-color-text-primary: #FFFFFF;
    --ifinmail-color-text-secondary: #FFFFFF;
    --ifinmail-color-text-muted: #E5E5E5;

    --ifinmail-color-border: #FFFFFF;
    --ifinmail-color-border-light: #8C8C8C;
    --ifinmail-color-surface-2: #121212;
    --ifinmail-color-surface-1: #000000;
    --ifinmail-bg-grid-color: transparent;

    --ifinmail-color-danger: #FF7B7B;
    --ifinmail-color-danger-tint: #2D0A0A;
    --ifinmail-color-warning: #FFB020;
    --ifinmail-color-warning-tint: #2D1D00;
    --ifinmail-color-success: #4ADE80;
    --ifinmail-color-success-tint: #06260F;
    --ifinmail-color-success-text: #86EFAC;
    --ifinmail-color-warning-text: #FFD27A;
    --ifinmail-color-danger-text: #FFB3B3;
    --ifinmail-color-info: #5CC8FF;
    --ifinmail-color-info-tint: #031D2B;

    --ifinmail-overlay-scrim: rgba(0, 0, 0, 0.8);
    --ifinmail-surface-glass: #000000;
    --ifinmail-on-dark-muted: #FFFFFF;
    --ifinmail-sheen: rgba(255, 255, 255, 0.12);
    --ifinmail-spinner-track-on-light: rgba(255, 255, 255, 0.35);
    --ifinmail-focus-ring-danger: rgba(255, 123, 123, 0.5);
    --ifinmail-watermark: transparent;
    --ifinmail-chevron-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");

    --ifinmail-surface-bright: #000000;
    --ifinmail-primary-container: #000000;
    --ifinmail-surface-container-lowest: #000000;
    --ifinmail-surface-container-high: #1F1F1F;
    --ifinmail-surface-container-highest: #333333;
    --ifinmail-surface-dim: #000000;
    --ifinmail-inverse-surface: #FFFFFF;
    --ifinmail-inverse-on-surface: #000000;

    --ifinmail-on-secondary: #000000;
    --ifinmail-secondary-fixed: #2B2400;
    --ifinmail-on-secondary-fixed: #FFFFFF;
    --ifinmail-on-secondary-fixed-variant: #FFE766;
    --ifinmail-on-primary: #000000;
    --ifinmail-on-error: #000000;
    --ifinmail-on-error-container: #FFB3B3;
    --ifinmail-on-success-container: #86EFAC;
    --ifinmail-on-warning-container: #FFD27A;

    --ifinmail-sidebar-active-bg: #2B2400;
    --ifinmail-sidebar-active-color: #FFD400;
    --ifinmail-sidebar-hover-bg: #1F1F1F;
    --ifinmail-sidebar-text: #FFFFFF;
    --ifinmail-sidebar-text-muted: #E5E5E5;

    --ifinmail-focus-ring-width: 3px;
    --ifinmail-shadow-2: 0 0 0 1px #FFFFFF;
    --ifinmail-shadow-3: 0 0 0 1px #FFFFFF;
}