/* ============================================================================
   DockVault Vault Service - Modern Business UI Design System
   Version: 2.0
   Features: Light/Dark themes, elegant animations, corporate-ready styling
   ============================================================================ */

/* ============================================================================
   CSS RESET & BASE
   ============================================================================ */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ============================================================================
   DESIGN TOKENS - Light Theme (Default)
   ============================================================================ */
:root {
    /* Brand Colors - Professional & Trustworthy */
    --brand-primary: #0f172a;          /* Deep slate - authority */
    --brand-secondary: #3b82f6;        /* Bright blue - trust */
    --brand-accent: #06b6d4;           /* Cyan - modern touch */
    
    /* Functional Colors */
    --success: #10b981;                /* Emerald green */
    --warning: #f59e0b;                /* Amber */
    --error: #ef4444;                  /* Red */
    --info: #3b82f6;                   /* Blue */
    
    /* Neutral Palette - Light Theme */
    --surface-0: #ffffff;              /* Pure white - cards, modals */
    --surface-1: #f8fafc;              /* Lightest gray - page background */
    --surface-2: #f1f5f9;              /* Light gray - hover states */
    --surface-3: #e2e8f0;              /* Border color */
    --surface-4: #cbd5e1;              /* Dividers */
    
    /* Text Colors - Light Theme */
    --text-primary: #0f172a;           /* Headings, important text */
    --text-secondary: #475569;         /* Body text */
    --text-tertiary: #64748b;          /* Labels, captions */
    --text-disabled: #94a3b8;          /* Disabled state */
    --text-inverse: #ffffff;           /* Text on dark backgrounds */
    
    /* Interactive States */
    --hover-overlay: rgba(0, 0, 0, 0.04);
    --active-overlay: rgba(0, 0, 0, 0.08);
    --focus-ring: 0 0 0 3px rgba(59, 130, 246, 0.2);
    
    /* Elevation System - Shadows */
    --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    
    /* Spacing Scale */
    --space-xs: 0.25rem;   /* 4px */
    --space-sm: 0.5rem;    /* 8px */
    --space-md: 1rem;      /* 16px */
    --space-lg: 1.5rem;    /* 24px */
    --space-xl: 2rem;      /* 32px */
    --space-2xl: 3rem;     /* 48px */
    --space-3xl: 4rem;     /* 64px */
    
    /* Border Radius */
    --radius-sm: 0.375rem;  /* 6px */
    --radius-md: 0.5rem;    /* 8px */
    --radius-lg: 0.75rem;   /* 12px */
    --radius-xl: 1rem;      /* 16px */
    --radius-full: 9999px;  /* Pills/circles */
    
    /* Typography */
    --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    --font-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, monospace;
    
    /* Font Sizes */
    --text-xs: 0.75rem;     /* 12px */
    --text-sm: 0.875rem;    /* 14px */
    --text-base: 1rem;      /* 16px */
    --text-lg: 1.125rem;    /* 18px */
    --text-xl: 1.25rem;     /* 20px */
    --text-2xl: 1.5rem;     /* 24px */
    --text-3xl: 1.875rem;   /* 30px */
    --text-4xl: 2.25rem;    /* 36px */
    
    /* Animation */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
    
    /* Layout */
    --navbar-height: 4rem;
    --sidebar-width: 16rem;
    --content-max-width: 1280px;
}

/* ============================================================================
   DARK THEME
   ============================================================================ */
[data-theme="dark"] {
    /* Neutral Palette - Dark Theme */
    --surface-0: #0f172a;              /* Dark slate - cards, modals */
    --surface-1: #1e293b;              /* Page background */
    --surface-2: #334155;              /* Hover states */
    --surface-3: #475569;              /* Borders */
    --surface-4: #64748b;              /* Dividers */
    
    /* Text Colors - Dark Theme */
    --text-primary: #f8fafc;           /* Headings, important text */
    --text-secondary: #cbd5e1;         /* Body text */
    --text-tertiary: #94a3b8;          /* Labels, captions */
    --text-disabled: #64748b;          /* Disabled state */
    --text-inverse: #0f172a;           /* Text on light backgrounds */
    
    /* Interactive States - Dark Theme */
    --hover-overlay: rgba(255, 255, 255, 0.05);
    --active-overlay: rgba(255, 255, 255, 0.1);
    
    /* Shadows - Darker for dark theme */
    --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px -1px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6), 0 8px 10px -6px rgba(0, 0, 0, 0.6);
}

/* ============================================================================
   BASE STYLES
   ============================================================================ */
html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: 1.7; /* Improved for readability */
    color: var(--text-secondary); /* Better hierarchy - body text is secondary */
    background-color: var(--surface-1); /* Softer background - cards use surface-0 */
    transition: background-color var(--transition-base), color var(--transition-base);
    min-height: 100vh;
}

/* ============================================================================
   TYPOGRAPHY
   ============================================================================ */
h1, h2, h3, h4, h5, h6 {
    color: var(--text-primary);
    font-weight: 600;
    line-height: 1.3; /* Tighter for headings */
    margin-bottom: var(--space-md);
    letter-spacing: -0.02em; /* Subtle tightening for elegance */
}

h1 { 
    font-size: var(--text-4xl); 
    font-weight: 700;
    margin-bottom: var(--space-lg); /* More space after large heading */
}
h2 { 
    font-size: var(--text-3xl); 
    margin-bottom: var(--space-lg);
}
h3 { 
    font-size: var(--text-2xl); 
}
h4 { font-size: var(--text-xl); }
h5 { font-size: var(--text-lg); }
h6 { font-size: var(--text-base); }

p {
    margin-bottom: var(--space-md);
    max-width: 70ch; /* Optimal reading width */
}

/* The 70ch reading-width cap above leaves a paragraph as a narrow, left-anchored
   block; inside a centered placeholder (empty state / no-preview) that reads as
   left-aligned under the centered heading. Auto side margins re-center the block
   while keeping the readable line length. */
.empty-state p,
.preview-none p {
    margin-inline: auto;
}

a {
    color: var(--brand-secondary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--brand-accent);
}

code {
    font-family: var(--font-mono);
    font-size: 0.9em;
    background-color: var(--surface-2);
    padding: 0.125rem 0.375rem;
    border-radius: var(--radius-sm);
}

/* ============================================================================
   LAYOUT UTILITIES
   ============================================================================ */
.container {
    max-width: var(--content-max-width);
    margin: 0 auto;
    padding: var(--space-xl);
}

.container-sm {
    max-width: 640px;
    margin: 0 auto;
    padding: var(--space-xl);
}

.container-lg {
    max-width: 1536px;
    margin: 0 auto;
    padding: var(--space-xl);
}

/* Flex Utilities */
.flex {
    display: flex;
}

.flex-col {
    flex-direction: column;
}

.items-center {
    align-items: center;
}

.items-start {
    align-items: flex-start;
}

.items-end {
    align-items: flex-end;
}

.justify-center {
    justify-content: center;
}

.justify-between {
    justify-content: space-between;
}

.justify-end {
    justify-content: flex-end;
}

.gap-xs { gap: var(--space-xs); }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }
.gap-xl { gap: var(--space-xl); }

/* Grid Utilities */
.grid {
    display: grid;
}

.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1024px) {
    .grid-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grid-cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
    .grid-cols-4,
    .grid-cols-3,
    .grid-cols-2 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
}

/* ============================================================================
   SCREEN MANAGEMENT
   ============================================================================ */
.screen {
    display: none !important;
}

.screen.active {
    display: block !important;
}

/* Auth boot: when a session token is cached (auth-boot.js sets data-auth="pending"
   pre-paint), show the neutral #boot-screen splash INSTEAD of the default-active
   login screen, until app.js verifies the token and reveals the dashboard — so an
   expired/again-logged-out session never flashes the app shell or a stale login. */
html[data-auth="pending"] #login-screen.active { display: none !important; }
html[data-auth="pending"] #boot-screen { display: flex !important; }

/* Invitation acceptance: an /?invite=... link (auth-boot.js sets data-invite pre-paint) shows the
   dedicated #invite-screen instead of the default-active login screen or the app shell — so an
   anonymous invitee never sees a flash of either. */
html[data-invite] #login-screen.active { display: none !important; }
html[data-invite] #boot-screen { display: none !important; }
html[data-invite] #invite-screen { display: flex !important; }

/* Password reset: an /?reset=... link (auth-boot.js sets data-reset pre-paint) shows the dedicated
   #reset-screen instead of the login screen or app shell. */
html[data-reset] #login-screen.active { display: none !important; }
html[data-reset] #boot-screen { display: none !important; }
html[data-reset] #reset-screen { display: flex !important; }

/* ============================================================================
   CONTINUED IN NEXT MESSAGE...
   ============================================================================ */