/* =============================================================
   Connect N — Design Tokens (Lothan Hospital)
   Single source of truth. All other CSS references these.
   ============================================================= */

:root {
    /* ============ Brand Colors ============ */
    --lh-navy:            #202080;
    --lh-navy-dark:       #1A1A6B;
    --lh-navy-deeper:     #121250;
    --lh-navy-50:         #F0F0FA;
    --lh-navy-100:        #DCDCF0;
    --lh-navy-200:        #B8B8E0;
    --lh-navy-300:        #8888C8;
    --lh-navy-600:        #1A1A6B;
    --lh-navy-700:        #141457;

    --lh-gold:            #C3AC82;
    --lh-gold-dark:       #A88F62;
    --lh-gold-deeper:     #8B7349;
    --lh-gold-50:         #FBF9F4;
    --lh-gold-100:        #F5EFE2;
    --lh-gold-200:        #E8DBBC;
    --lh-gold-300:        #DBC79A;

    --lh-blue:            #4780CD;
    --lh-blue-light:      #7AA3DC;
    --lh-blue-50:         #EEF4FB;

    --lh-fog:             #DEDEE3;
    --lh-fog-light:       #EFEFF2;

    /* Gradient (from brand guideline) */
    --lh-gradient:        linear-gradient(135deg, #202080 0%, #27328E 24%, #3A60B3 71%, #4780CD 100%);
    --lh-gradient-gold:   linear-gradient(135deg, #C3AC82 0%, #A88F62 100%);

    /* ============ Semantic Colors ============ */
    /* Primary (chrome/navigation): Navy */
    --color-primary:              var(--lh-navy);
    --color-primary-hover:        var(--lh-navy-dark);
    --color-primary-active:       var(--lh-navy-deeper);
    --color-primary-subtle:       var(--lh-navy-50);
    --color-primary-subtle-hover: var(--lh-navy-100);
    --color-on-primary:           #FFFFFF;

    /* Action (buttons/CTAs): Gold */
    --color-action:               var(--lh-gold);
    --color-action-hover:         var(--lh-gold-dark);
    --color-action-active:        var(--lh-gold-deeper);
    --color-action-subtle:        var(--lh-gold-50);
    --color-on-action:             #FFFFFF;

    /* Info: Light blue */
    --color-info:                 var(--lh-blue);
    --color-info-hover:           #3567B8;
    --color-info-subtle:          var(--lh-blue-50);
    --color-on-info:              #FFFFFF;

    /* Safety colors (unchanged — patient safety convention) */
    --color-urgent:               #DC2626;
    --color-urgent-hover:         #B91C1C;
    --color-urgent-subtle:        #FEF2F2;
    --color-urgent-border:        #FCA5A5;
    --color-on-urgent:             #FFFFFF;

    --color-warning:              #F59E0B;
    --color-warning-hover:        #D97706;
    --color-warning-subtle:       #FFFBEB;
    --color-warning-border:       #FCD34D;
    --color-on-warning:           #78350F;

    --color-success:              #059669;
    --color-success-hover:        #047857;
    --color-success-subtle:       #ECFDF5;
    --color-success-border:       #6EE7B7;
    --color-on-success:           #FFFFFF;

    --color-critical:             #991B1B;
    --color-critical-subtle:      #FEE2E2;

    /* ============ Neutral Palette ============ */
    --neutral-0:    #FFFFFF;
    --neutral-50:   #FAFBFC;
    --neutral-100:  #F3F4F6;
    --neutral-150:  #ECEEF1;
    --neutral-200:  #E5E7EB;
    --neutral-300:  #D1D5DB;
    --neutral-400:  #9CA3AF;
    --neutral-500:  #6B7280;
    --neutral-600:  #4B5563;
    --neutral-700:  #374151;
    --neutral-800:  #1F2937;
    --neutral-900:  #111827;
    --neutral-950:  #0A0D13;

    /* ============ Surface Tokens (theme-aware) ============ */
    --surface-bg:           var(--neutral-100);      /* page background */
    --surface-card:         var(--neutral-0);        /* card / widget bg */
    --surface-card-hover:   var(--neutral-50);
    --surface-raised:       var(--neutral-0);        /* modals, menus */
    --surface-sunken:       var(--neutral-50);       /* input fields */
    --surface-overlay:      rgba(17, 24, 39, 0.5);   /* modal backdrop */

    --border-subtle:        var(--neutral-150);
    --border-default:       var(--neutral-200);
    --border-strong:        var(--neutral-300);
    --border-focus:         var(--lh-gold);

    --text-primary:         var(--neutral-900);
    --text-secondary:       var(--neutral-600);
    --text-muted:           var(--neutral-500);
    --text-disabled:        var(--neutral-400);
    --text-on-dark:         var(--neutral-0);
    --text-link:            var(--lh-navy);
    --text-link-hover:      var(--lh-gold-dark);

    /* ============ Typography ============ */
    /* DINOT font family (self-hosted — see /assets/fonts/) */
    --font-sans:       "DINOT", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-display:    "DINOT", var(--font-sans);
    --font-mono:       ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

    /* Type scale — optimized for tablet readability */
    --text-2xs:   0.6875rem;   /* 11px - micro labels */
    --text-xs:    0.75rem;     /* 12px - captions */
    --text-sm:    0.8125rem;   /* 13px - secondary */
    --text-base:  0.9375rem;   /* 15px - body */
    --text-md:    1rem;        /* 16px - form inputs */
    --text-lg:    1.125rem;    /* 18px - emphasized */
    --text-xl:    1.25rem;     /* 20px - h4 */
    --text-2xl:   1.5rem;      /* 24px - h3 */
    --text-3xl:   1.875rem;    /* 30px - h2 */
    --text-4xl:   2.25rem;     /* 36px - h1 */
    --text-5xl:   3rem;        /* 48px - display */

    --leading-tight:  1.2;
    --leading-snug:   1.35;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;

    --weight-light:    300;
    --weight-regular:  400;
    --weight-medium:   500;
    --weight-semibold: 600;
    --weight-bold:     700;
    --weight-black:    900;

    --tracking-tight:  -0.02em;
    --tracking-normal: 0;
    --tracking-wide:   0.04em;
    --tracking-wider:  0.08em;

    /* ============ Spacing Scale ============ */
    --space-0:   0;
    --space-1:   0.25rem;   /* 4px */
    --space-2:   0.5rem;    /* 8px */
    --space-3:   0.75rem;   /* 12px */
    --space-4:   1rem;      /* 16px */
    --space-5:   1.25rem;   /* 20px */
    --space-6:   1.5rem;    /* 24px */
    --space-8:   2rem;      /* 32px */
    --space-10:  2.5rem;    /* 40px */
    --space-12:  3rem;      /* 48px */
    --space-16:  4rem;      /* 64px */
    --space-20:  5rem;      /* 80px */

    /* ============ Radii ============ */
    --radius-xs:   4px;
    --radius-sm:   6px;
    --radius-md:   8px;
    --radius-lg:   12px;
    --radius-xl:   16px;
    --radius-2xl:  24px;
    --radius-full: 9999px;

    /* ============ Shadows ============ */
    --shadow-xs:    0 1px 2px rgba(17, 24, 39, 0.05);
    --shadow-sm:    0 1px 3px rgba(17, 24, 39, 0.08), 0 1px 2px rgba(17, 24, 39, 0.04);
    --shadow-md:    0 4px 12px rgba(17, 24, 39, 0.08), 0 2px 4px rgba(17, 24, 39, 0.04);
    --shadow-lg:    0 12px 24px rgba(17, 24, 39, 0.10), 0 4px 8px rgba(17, 24, 39, 0.04);
    --shadow-xl:    0 24px 48px rgba(17, 24, 39, 0.14), 0 8px 16px rgba(17, 24, 39, 0.06);

    --shadow-navy:  0 8px 24px rgba(32, 32, 128, 0.20);
    --shadow-gold:  0 8px 24px rgba(195, 172, 130, 0.35);

    --shadow-focus: 0 0 0 3px rgba(195, 172, 130, 0.35);
    --shadow-focus-error: 0 0 0 3px rgba(220, 38, 38, 0.25);

    /* ============ Z-index Scale ============ */
    --z-base:      1;
    --z-raised:    10;
    --z-sticky:    50;
    --z-overlay:   100;
    --z-modal:     200;
    --z-toast:     300;
    --z-tooltip:   400;

    /* ============ Motion ============ */
    --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
    --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);

    --duration-instant: 100ms;
    --duration-fast:    150ms;
    --duration-normal:  250ms;
    --duration-slow:    400ms;

    /* ============ Layout ============ */
    --topbar-height:       64px;
    --sidebar-width:       268px;
    --sidebar-width-sm:    72px;     /* collapsed state */
    --content-max-width:   1440px;
    --content-padding:     var(--space-6);

    /* Touch targets — tablet-first (nurses use gloves) */
    --touch-target-min:    44px;
    --touch-target-comfy:  52px;

    /* ============ Focus ring ============ */
    --focus-ring-color: var(--lh-gold);
    --focus-ring-width: 3px;
}

/* ================================================================
   Dark mode — activated by [data-theme="dark"] on <html>
   Designed for night-shift comfort: softer contrast, warmer navy
   ================================================================ */
[data-theme="dark"] {
    --surface-bg:           #0F1419;
    --surface-card:         #1A1F28;
    --surface-card-hover:   #222832;
    --surface-raised:       #232934;
    --surface-sunken:       #141820;
    --surface-overlay:      rgba(0, 0, 0, 0.7);

    --border-subtle:        #1F242E;
    --border-default:       #2A3040;
    --border-strong:        #3A4156;
    --border-focus:         var(--lh-gold);

    --text-primary:         #E8E9EE;
    --text-secondary:       #A7ABB7;
    --text-muted:           #7A7F8C;
    --text-disabled:        #565B68;
    --text-link:            var(--lh-blue-light);
    --text-link-hover:      var(--lh-gold);

    --color-primary:              #4747C5;
    --color-primary-hover:        #5A5ADA;
    --color-primary-active:       var(--lh-navy);
    --color-primary-subtle:       rgba(71, 71, 197, 0.12);
    --color-primary-subtle-hover: rgba(71, 71, 197, 0.20);

    --color-action:               var(--lh-gold);
    --color-action-hover:         #D4BE9A;
    --color-action-subtle:        rgba(195, 172, 130, 0.12);

    --color-info-subtle:          rgba(71, 128, 205, 0.15);
    --color-urgent-subtle:        rgba(220, 38, 38, 0.18);
    --color-warning-subtle:       rgba(245, 158, 11, 0.15);
    --color-success-subtle:       rgba(5, 150, 105, 0.15);

    --shadow-sm:    0 1px 3px rgba(0, 0, 0, 0.45);
    --shadow-md:    0 4px 12px rgba(0, 0, 0, 0.5);
    --shadow-lg:    0 12px 24px rgba(0, 0, 0, 0.55);

    color-scheme: dark;
}

/* Auto dark mode when user hasn't chosen */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        --surface-bg:           #0F1419;
        --surface-card:         #1A1F28;
        --surface-card-hover:   #222832;
        --surface-raised:       #232934;
        --surface-sunken:       #141820;
        --surface-overlay:      rgba(0, 0, 0, 0.7);
        --border-subtle:        #1F242E;
        --border-default:       #2A3040;
        --border-strong:        #3A4156;
        --text-primary:         #E8E9EE;
        --text-secondary:       #A7ABB7;
        --text-muted:           #7A7F8C;
        --text-disabled:        #565B68;
        --text-link:            var(--lh-blue-light);
        --color-primary:              #4747C5;
        --color-primary-subtle:       rgba(71, 71, 197, 0.12);
        --color-action-subtle:        rgba(195, 172, 130, 0.12);
        --color-info-subtle:          rgba(71, 128, 205, 0.15);
        --color-urgent-subtle:        rgba(220, 38, 38, 0.18);
        --color-warning-subtle:       rgba(245, 158, 11, 0.15);
        --color-success-subtle:       rgba(5, 150, 105, 0.15);
        color-scheme: dark;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}