/*
 * IgniteATS Design Tokens
 * Default values on :root = Orange & Blue (light) theme.
 * Theme files override these via [data-theme] attribute selectors.
 * Components consume these tokens via var(--iats-*).
 */

:root {
    /* ===== Brand ===== */
    --iats-brand-primary: #074774;
    --iats-brand-primary-hover: #063556;
    --iats-brand-secondary: #F2B045;

    /* ===== Logo ===== */
    --iats-logo-primary: var(--iats-brand-primary);
    --iats-logo-secondary: var(--iats-brand-secondary);

    /* ===== Surface / Background ===== */
    --iats-bg-body: #ffffff;
    --iats-bg-surface: var(--iats-bg-body);
    --iats-bg-surface-raised: #f5f5f5;
    --iats-bg-surface-sunken: #f7f7f7;
    --iats-bg-sidebar: var(--iats-bg-body);
    --iats-bg-topbar: #f7f7f7;
    --iats-bg-overlay: rgba(8, 52, 83, 0.2);
    --iats-bg-login-card: var(--iats-bg-body);

    /* ===== Text ===== */
    --iats-text-primary: var(--iats-neutral-gray-darkest);
    --iats-text-secondary: #666666;
    --iats-text-tertiary: #7b7b7b;
    --iats-text-inverse: var(--iats-neutral-white);
    --iats-text-link: #006bb7;
    --iats-text-link-hover: var(--iats-brand-primary);
    --iats-text-heading: var(--iats-neutral-black);

    /* Centre value label for the gauge/donut widgets. Dark in light mode for
       contrast on the light card; overridden to near-white in dark mode. */
    --iats-gauge-value-text: #585858;

    /* ===== Buttons ===== */
    --iats-btn-primary-bg: var(--iats-brand-primary);
    --iats-btn-primary-border: var(--iats-brand-primary);
    --iats-btn-primary-text: var(--iats-text-inverse);
    --iats-btn-primary-hover-bg: var(--iats-brand-primary-hover);
    --iats-btn-primary-hover-border: var(--iats-brand-primary-hover);
    --iats-btn-secondary-bg: var(--iats-bg-body);
    --iats-btn-secondary-border: var(--iats-accent-primary);
    --iats-btn-secondary-text: var(--iats-accent-primary);
    --iats-btn-secondary-hover-bg: #f2f7fb;
    --iats-btn-danger-bg: #FF6D6D;
    --iats-btn-danger-hover-bg: #e55a5a;
    --iats-btn-danger-text: var(--iats-text-inverse);

    /* ===== Form / Input ===== */
    --iats-input-bg: var(--iats-bg-body);
    --iats-input-border: #bfbfbf;
    --iats-input-text: var(--iats-text-primary);
    --iats-input-placeholder: var(--iats-text-tertiary);
    --iats-input-focus-border: var(--iats-accent-primary);
    --iats-input-focus-ring: #258cfb;
    --iats-input-valid: #26b050;
    --iats-input-invalid: #e50000;

    /* ===== Borders ===== */
    --iats-border-default: #d6d5d5;
    --iats-border-light: #edf1f4;
    --iats-border-input: #929292;
    --iats-border-header-control: #8fb8c9;

    /* ===== Navigation =====
       Inactive nav items resolve to the muted text tone; the active item
       pops back to the brand color. The Figma comp keys readability off
       this contrast, so the two tokens are intentionally decoupled. */
    --iats-nav-text: var(--iats-text-tertiary);
    --iats-nav-text-active: var(--iats-brand-primary);
    --iats-nav-active-bg: var(--iats-accent-primary-light);
    --iats-nav-active-bar: var(--iats-brand-primary);
    --iats-nav-hover-bg: rgba(7, 71, 116, 0.08);

    /* ===== Sidebar ===== */
    --iats-sidebar-border-color: var(--iats-border-default);
    --iats-sidebar-brand-bg: transparent;
    --iats-sidebar-close-bg: rgba(0, 0, 0, 0.06);
    --iats-sidebar-close-color: var(--iats-text-secondary);
    --iats-sidebar-close-hover-bg: rgba(0, 0, 0, 0.12);
    --iats-sidebar-close-hover-color: var(--iats-text-primary);
    --iats-sidebar-footer-border: var(--iats-border-light);
    --iats-sidebar-version-color: var(--iats-text-tertiary);
    --iats-sidebar-link-color: var(--iats-text-secondary);
    --iats-sidebar-link-hover-color: var(--iats-text-primary);
    --iats-sidebar-link-separator-color: var(--iats-text-tertiary);
    --iats-sidebar-heading-color: var(--iats-text-tertiary);

    /* ===== Status / Toast ===== */
    --iats-status-error-bg: #fef2f2;
    --iats-status-error-border: #fecaca;
    --iats-status-error-text: #991b1b;
    --iats-status-success-bg: #f0fdf4;
    --iats-status-success-border: #bbf7d0;
    --iats-status-success-text: #166534;
    --iats-status-warning-bg: #fffbeb;
    --iats-status-warning-border: #fde68a;
    --iats-status-warning-text: #92400e;
    --iats-status-info-bg: #eff6ff;
    --iats-status-info-border: #bfdbfe;
    --iats-status-info-text: #1e40af;

    /* ===== Accent (agreement, checkboxes, focus) ===== */
    --iats-accent-primary: #0E5A8E;
    --iats-accent-primary-hover: var(--iats-brand-primary);
    --iats-accent-primary-light: rgba(15, 89, 142, 0.12);
    --iats-accent-continue-bg: var(--iats-brand-primary);
    --iats-accent-continue-hover: #0a5589;

    /* ===== Scrollbar ===== */
    --iats-scrollbar-thumb: var(--iats-text-tertiary);
    --iats-scrollbar-track: var(--iats-bg-surface-raised);

    /* ===== Border Radius ===== */
    --iats-radius-sm: 4px;
    --iats-radius-md: 8px;
    --iats-radius-lg: 12px;
    --iats-radius-xl: 16px;
    --iats-radius-pill: 9999px;

    /* ===== Typography ===== */
    --iats-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --iats-font-size-xs: 0.75rem;
    --iats-font-size-sm: 0.875rem;
    --iats-font-size-base: 1rem;
    --iats-font-size-lg: 1.125rem;
    --iats-font-size-xl: 1.25rem;
    --iats-font-weight-light: 300;
    --iats-font-weight-normal: 400;
    --iats-font-weight-medium: 500;
    --iats-font-weight-semibold: 600;
    --iats-font-weight-bold: 700;

    /* ===== Layout ===== */
    --iats-header-height: 64px;
    --iats-sidebar-width: 160px;
    --iats-content-bg: var(--iats-bg-surface-raised);
    --iats-content-padding: 1.5rem;
    --iats-content-padding-mobile: 1rem;
    --iats-transition-speed: 0.3s;

    /* ===== Shadows ===== */
    --iats-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.08);
    --iats-shadow-md: 0 10px 25px rgba(0, 0, 0, 0.2);
    --iats-shadow-lg: 0 24px 56px rgba(0, 0, 0, 0.18);
    /* Ambient lift for content cards (IATS-105): no offset, wide blur. Color tracks
       the theme's text color (8% alpha) so it inverts with the theme - a dark halo in
       light mode, a light halo in dark mode - instead of a fixed black. */
    --iats-shadow-card: 0 0 32px 0 color-mix(in srgb, var(--iats-text-primary) 8%, transparent);

    /* ===== Widget surface (dashboard tiles) ===== */
    --iats-widget-bg: var(--iats-bg-surface);
    --iats-widget-border: var(--iats-border-light);
    --iats-widget-text: var(--iats-text-primary);
    --iats-widget-header-bg: var(--iats-brand-primary);
    --iats-widget-header-text: var(--iats-text-inverse);
    --iats-widget-footer-bg: var(--iats-bg-surface-raised);
    --iats-widget-shadow: var(--iats-shadow-sm);

    /* ===== Dashboard configure-mode widget actions ===== */
    --iats-widget-action-hover-bg: rgba(255, 255, 255, 0.18);

    /* ===== Content / Secondary usage ===== */
    --iats-content-color: #337AB7;
    /* Brand-colored field labels ("Facility:", "Individual:") on widget rows
       (IATS-187). Follows the brand in light mode; theme dark blocks flip it
       to their lightened content color so it stays readable on dark rows. */
    --iats-field-label-text: var(--iats-brand-primary);
    --iats-secondary-link: #FFB800;
    --iats-highlight: var(--iats-brand-secondary);

    /* ===== Color Palette Tokens ===== */
    --iats-primary-tone-0: #012136;
    --iats-primary-tone-10: #072F4A;
    --iats-primary-tone-20: #063556;
    --iats-primary-tone-30: #074774;
    --iats-primary-tone-40: #0F598E;
    --iats-primary-tone-50: #337AB7;
    --iats-primary-tone-80: #5CA2DF;
    --iats-primary-tone-100: #98C7F1;

    --iats-secondary-tone-0: #B87A15;
    --iats-secondary-tone-10: #CA9032;
    --iats-secondary-tone-20: #F2B045;
    --iats-secondary-tone-30: #E8B96D;
    --iats-secondary-tone-40: #EBC992;
    --iats-secondary-tone-80: #ECD5AF;
    --iats-secondary-tone-100: #F6EAD7;

    --iats-tertiary-tone-0: #485A65;
    --iats-tertiary-tone-10: #5B7383;
    --iats-tertiary-tone-20: #7594A8;
    --iats-tertiary-tone-30: #8BADC3;
    --iats-tertiary-tone-40: #9FC6E0;
    --iats-tertiary-tone-50: #C6E4F8;

    --iats-gender-male: #9BE6F0;
    --iats-gender-female: #F9AEC5;
    --iats-gender-unspecified: #FDEC79;

    --iats-label-warning: #C55A12;
    --iats-label-bad: #F4B183;
    --iats-label-normal: #FFE699;
    --iats-label-normal-strong: #FBD04C;
    --iats-label-good: #D6E9C9;
    --iats-label-excellent: #548235;

    /* Patient schedule placard fills (IATS-105). Identical across every theme
       and dark mode for now; revisit if the designer themes them later. */
    --iats-scheduled-bg: #FFF9C4;
    --iats-unscheduled-bg: #C2FFD0;

    /* Patient overview sidebar placard fills. Yellow name placard. Room
       placard and column headers share --iats-bg-accent. Theme-static for the
       same reason as the schedule placards above. */
    --iats-name-placard-bg: #FFF492;
    --iats-bg-accent: #E9E9E9;

    /* Card shadow used by the patient overview card and the column panels:
       0 4 40 blur, 8% black. Soft and broad. */
    --iats-shadow-card-soft: 0 4px 40px 0 rgba(0, 0, 0, 0.08);

    --iats-notify-link: #0066FF;
    --iats-notify-error: #FF0F01;
    --iats-notify-warning: #FFD34E;
    --iats-notify-success: #34BC0B;

    /* Status flags (IATS-187): icon + colored text rows in the dashboard
       widgets (e.g. "0 Visits Remaining", "1 Visit Remaining", "AP due in
       2 Visits"). Error shares the notification red; warning and info are
       the amber/blue from the IATS-163 widget designs. */
    --iats-status-flag-error: var(--iats-notify-error);
    --iats-status-flag-warning: #F2A933;
    --iats-status-flag-info: #3086C5;

    /* Facility group-header band inside the My Patients widget (IATS-187).
       Unlike the placard fills above, the band is part of the list surface,
       so theme dark blocks flip it to a dark band with light text. */
    --iats-row-group-header-bg: #DCDCDC;
    --iats-row-group-header-text: #2D2D2D;

    /* ===== Incomplete & Late Documentation widget ===== */
    /* Document-type pill fills — the pill is colored by the document type it
       displays. White pill text (--iats-doc-type-text) holds contrast on every
       fill. Recert reuses the existing rust label tone. Theme-static (like the
       schedule/name placards above); revisit if the designer themes them later. */
    --iats-doc-type-daily-bg: #79AFFB;
    --iats-doc-type-progress-bg: #42B7BD;
    --iats-doc-type-eval-bg: #2959EA;
    --iats-doc-type-recert-bg: var(--iats-label-warning); /* #C55A12 */
    --iats-doc-type-default-bg: var(--iats-tertiary-tone-20); /* #7594A8 */
    --iats-doc-type-text: var(--iats-neutral-white);
    /* Due-today status indicator (icon + label). The late indicator reuses
       --iats-notify-error (#FF0F01). */
    --iats-doc-due-today: #F2A833;

    --iats-neutral-white: #FFFFFF;
    --iats-neutral-black: #000000;
    --iats-neutral-gray-lightest: #F9F9F9;
    --iats-neutral-gray-darkest: #1C1C1C;

    /* ===== Illustration (theme-agnostic, mode-flipping foreground tones) ===== */
    /* Used by decorative inline SVGs (e.g. the 404 grackle). Defined globally
       so they flip with data-theme-mode only, not with the brand theme. */
    --iats-illustration-fg-strong: var(--iats-neutral-gray-darkest);
    --iats-illustration-fg-muted: #4a4a4a;
    --iats-illustration-fg-subtle: #7b7b7b;

    /* ===== Mode switch (dark/light toggle) ===== */
    --iats-mode-switch-track-bg: #FFFFFF;
    --iats-mode-switch-track-border: #D0D0D0;
    --iats-mode-switch-sun-bg: #FFFFFF;
    --iats-mode-switch-sun-stroke: var(--iats-brand-primary);
    --iats-mode-switch-moon-bg: var(--iats-brand-primary);
    --iats-mode-switch-moon-stroke: #F5F5F5;

    /* ===== Smart.Blazor remapping ===== */
    /* Moved to css/_smart-overrides.css (must load after smart.default.css) */
}

/* Kill all transitions while the theme is switching so every element snaps together */
.iats-theme-switching,
.iats-theme-switching *,
.iats-theme-switching *::before,
.iats-theme-switching *::after {
    transition-duration: 0s !important;
}

/* Dark-mode switch overrides (references themed tokens, so theme-agnostic) */
[data-theme-mode="dark"] {
    /* Widget header runs a touch darker in dark mode than the light brand fill
       it inherits from :root — darkened generically off the active theme's
       brand color so it holds for every theme while white header text stays
       legible. */
    --iats-widget-header-bg: color-mix(in srgb, var(--iats-brand-primary) 75%, #000000);

    --iats-mode-switch-track-bg: var(--iats-brand-primary);
    --iats-mode-switch-track-border: var(--iats-brand-primary);
    --iats-mode-switch-sun-bg: #FFFFFF;
    --iats-mode-switch-sun-stroke: #FFFFFF;
    --iats-mode-switch-moon-bg: var(--iats-brand-primary);
    --iats-mode-switch-moon-stroke: #F5F5F5;

    /* Illustration foreground tones flip near-black -> near-white in dark mode */
    --iats-illustration-fg-strong: #e2e8f0;
    --iats-illustration-fg-muted: #a0aec0;
    --iats-illustration-fg-subtle: #718096;
}

/* Reduced motion: disable transitions for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    :root {
        --iats-transition-speed: 0s;
    }
}

/* No-JS dark mode fallback for users with prefers-color-scheme: dark */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme-mode]) {
        --iats-bg-body: var(--iats-neutral-gray-darkest);
        --iats-bg-surface: #222222;
        --iats-bg-surface-raised: #2a2a2a;
        --iats-bg-surface-sunken: #1a1a1a;
        --iats-bg-topbar: var(--iats-neutral-gray-darkest);
        --iats-bg-login-card: #222222;
        --iats-bg-overlay: rgba(0, 0, 0, 0.5);
        --iats-text-primary: #e2e8f0;
        --iats-text-secondary: #a0aec0;
        --iats-text-tertiary: #718096;
        --iats-text-heading: #f7fafc;
        --iats-text-link: #5CA2DF;
        --iats-text-link-hover: #98C7F1;
        --iats-gauge-value-text: var(--iats-neutral-gray-lightest);
        --iats-btn-primary-bg: #0E5A8E;
        --iats-btn-primary-border: var(--iats-btn-primary-bg);
        --iats-btn-primary-hover-bg: #337AB7;
        --iats-btn-primary-hover-border: var(--iats-btn-primary-hover-bg);
        --iats-btn-secondary-bg: #1f2b47;
        --iats-btn-secondary-border: #5CA3DF;
        --iats-btn-secondary-text: #5CA3DF;
        --iats-btn-secondary-hover-bg: #263550;
        --iats-btn-danger-bg: #c53030;
        --iats-btn-danger-hover-bg: #e53e3e;
        --iats-btn-danger-text: var(--iats-neutral-white);
        --iats-input-bg: #1a1a1a;
        --iats-input-border: #4a5568;
        --iats-input-text: var(--iats-text-primary);
        --iats-input-placeholder: var(--iats-text-tertiary);
        --iats-input-focus-border: #5CA3DF;
        --iats-input-focus-ring: var(--iats-input-focus-border);
        --iats-border-default: #2d3748;
        --iats-border-light: #1f2b47;
        --iats-border-input: var(--iats-input-border);
        --iats-accent-primary: #5CA3DF;
        --iats-accent-primary-hover: #337AB7;
        --iats-accent-primary-light: rgba(92, 163, 223, 0.15);
        --iats-accent-continue-bg: var(--iats-btn-primary-bg);
        --iats-accent-continue-hover: var(--iats-btn-primary-hover-bg);
        --iats-scrollbar-thumb: #4a5568;
        --iats-scrollbar-track: #1a202c;
        --iats-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
        --iats-shadow-md: 0 10px 25px rgba(0, 0, 0, 0.4);
        --iats-shadow-lg: 0 24px 56px rgba(0, 0, 0, 0.5);
        --iats-widget-action-hover-bg: rgba(255, 255, 255, 0.12);
        --iats-content-color: #5CA3DF;
        --iats-field-label-text: var(--iats-content-color);
        --iats-row-group-header-bg: #3A3A3A;
        --iats-row-group-header-text: var(--iats-text-primary);
        --iats-secondary-link: #F2B045;
        --iats-highlight: var(--iats-brand-secondary);
        /* Status colors for dark mode */
        --iats-status-error-bg: #3b1111;
        --iats-status-error-border: #7f1d1d;
        --iats-status-error-text: #fca5a5;
        --iats-status-success-bg: #0f2a1a;
        --iats-status-success-border: #166534;
        --iats-status-success-text: #86efac;
        --iats-status-warning-bg: #2a1f0a;
        --iats-status-warning-border: #92400e;
        --iats-status-warning-text: #fcd34d;
        --iats-status-info-bg: #0f1a2e;
        --iats-status-info-border: #1e40af;
        --iats-status-info-text: #93c5fd;
        --iats-border-header-control: #4a5f70;
        /* Sidebar dark fallback */
        --iats-bg-sidebar: var(--iats-bg-body);
        --iats-nav-text: var(--iats-text-tertiary);
        --iats-nav-text-active: #5CA2DF;
        --iats-nav-active-bg: #0d1e30;
        --iats-nav-active-bar: var(--iats-accent-primary);
        --iats-nav-hover-bg: rgba(255, 255, 255, 0.08);
        --iats-sidebar-border-color: transparent;
        --iats-sidebar-brand-bg: transparent;
        --iats-sidebar-close-bg: rgba(255, 255, 255, 0.1);
        --iats-sidebar-close-color: #d7d7d7;
        --iats-sidebar-close-hover-bg: rgba(255, 255, 255, 0.2);
        --iats-sidebar-close-hover-color: var(--iats-neutral-white);
        --iats-sidebar-footer-border: rgba(255, 255, 255, 0.1);
        --iats-sidebar-version-color: rgba(255, 255, 255, 0.4);
        --iats-sidebar-link-color: rgba(255, 255, 255, 0.5);
        --iats-sidebar-link-hover-color: rgba(255, 255, 255, 0.8);
        --iats-sidebar-link-separator-color: rgba(255, 255, 255, 0.3);
        --iats-sidebar-heading-color: rgba(255, 255, 255, 0.5);
        /* Mode switch dark fallback */
        --iats-mode-switch-track-bg: var(--iats-brand-primary);
        --iats-mode-switch-track-border: var(--iats-brand-primary);
        --iats-mode-switch-sun-bg: #FFFFFF;
        --iats-mode-switch-sun-stroke: #FFFFFF;
        --iats-mode-switch-moon-bg: var(--iats-brand-primary);
        --iats-mode-switch-moon-stroke: #F5F5F5;
        /* Illustration foreground dark fallback */
        --iats-illustration-fg-strong: #e2e8f0;
        --iats-illustration-fg-muted: #a0aec0;
        --iats-illustration-fg-subtle: #718096;
    }
}