/* 1. Primitive Tokens */
:root {
    --slate-50: #F8FAFC;
    --slate-100: #F1F5F9;
    --slate-200: #E2E8F0;
    --slate-300: #CBD5E1;
    --slate-400: #94A3B8;
    --slate-500: #64748B;
    --slate-600: #475569;
    --slate-700: #334155;
    --slate-800: #1E293B;
    --slate-900: #0F172A;
    --slate-950: #020617;
    
    --emerald-50: #ECFDF5;
    --emerald-100: #D1FAE5;
    --emerald-500: #10B981;
    --emerald-600: #059669;
    --emerald-700: #047857;

    /* 2. Semantic Tokens (Light) */
    /* Backgrounds & Surfaces */
    --color-bg: var(--slate-50);
    --color-surface: #FFFFFF;
    --color-surface-hover: var(--slate-100);
    --color-surface-active: var(--slate-200);
    --color-surface-raised: #FFFFFF;
    
    /* Text */
    --color-text-primary: var(--slate-900);
    --color-text-secondary: var(--slate-600);
    --color-text-tertiary: var(--slate-500);
    --color-text-disabled: rgba(15, 23, 42, 0.4);
    --color-text-on-brand: #FFFFFF;
    
    /* Borders */
    --color-border: var(--slate-200);
    --color-border-strong: var(--slate-300);
    
    /* Actions (Brand) */
    --color-primary: var(--emerald-600);
    --color-primary-hover: var(--emerald-700);
    --color-primary-subtle: var(--emerald-50);
    
    /* Feedback (Success, Error, Warning) */
    --color-danger-subtle: #FEF2F2;
    --color-danger: #DC2626;
    --color-warning: #D97706;
    --color-warning-subtle: rgba(217, 119, 6, 0.12);
    --color-success: #10B981;
    --color-success-subtle: rgba(16, 185, 129, 0.15);
    
    /* Elevation (Shadows) */
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.05), 0 2px 4px -2px rgba(0,0,0,0.05);

    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;

    --border-radius: 8px;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;

    /* Mobile layout */
    --bottom-nav-height: 60px;
}

/* =========================================================================
   Mobile Utilities
   ========================================================================= */

/* Horizontal scroll wrapper for tables on mobile */
.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--border-radius);
}

/* iOS zoom prevention: inputs must be at least 16px to avoid Safari zooming */
@media (max-width: 768px) {
    input,
    select,
    textarea {
        font-size: max(16px, 1em) !important;
    }
}

:root[data-theme="pos"] {
    --color-primary: #5E9419;
    --color-primary-hover: #4C7814;
    --brand-rgb: 94, 148, 25;
    --color-primary-subtle: rgba(94, 148, 25, 0.12);

    --color-bg: #F5F7F5;
    --color-surface-hover: #EAEFEA;
    --color-surface-active: #DFE6DF;
    --color-border: #D1DCD3;
    --color-border-elevated: #D1DCD3;
    
    --color-text-primary: #141B16;
    --color-text-tertiary: #5E6E64;

    --color-success: #5E9419;
    --color-success-subtle: rgba(94, 148, 25, 0.12);

    --border-radius: 12px;
    --radius-sm: 8px;
    --header-height: 52px;
    --safe-bottom: env(safe-area-inset-bottom, 0px);
}

:root[data-theme="dark"] {
    --color-bg: var(--slate-950);
    --color-surface: var(--slate-900);
    --color-surface-hover: rgba(255, 255, 255, 0.05);
    --color-surface-active: rgba(255, 255, 255, 0.1);
    --color-surface-raised: var(--slate-800);
    
    --color-text-primary: var(--slate-50);
    --color-text-secondary: var(--slate-300);
    --color-text-tertiary: var(--slate-400);
    --color-text-disabled: rgba(255, 255, 255, 0.3);
    --color-text-on-brand: #FFFFFF;
    
    --color-border: rgba(255, 255, 255, 0.15);
    --color-border-strong: var(--slate-600);
    
    --color-primary: var(--emerald-500);
    --color-primary-hover: var(--emerald-600);
    --color-primary-subtle: rgba(16, 185, 129, 0.15);
    
    --color-danger-subtle: rgba(239, 68, 68, 0.15);
    --color-danger: #ef4444;
    --color-warning-subtle: rgba(245, 158, 11, 0.15);
    --color-warning: #f59e0b;
    --color-success: #10B981;
    --color-success-subtle: rgba(16, 185, 129, 0.15);
    
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.5);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.5), 0 2px 4px -2px rgba(0,0,0,0.5);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --color-bg: var(--slate-950);
        --color-surface: var(--slate-900);
        --color-surface-hover: rgba(255, 255, 255, 0.05);
        --color-surface-active: rgba(255, 255, 255, 0.1);
        --color-surface-raised: var(--slate-800);
        
        --color-text-primary: var(--slate-50);
        --color-text-secondary: var(--slate-300);
        --color-text-tertiary: var(--slate-400);
        --color-text-disabled: rgba(255, 255, 255, 0.3);
        --color-text-on-brand: #FFFFFF;
        
        --color-border: rgba(255, 255, 255, 0.15);
        --color-border-strong: var(--slate-600);
        
        --color-primary: var(--emerald-500);
        --color-primary-hover: var(--emerald-600);
        --color-primary-subtle: rgba(16, 185, 129, 0.15);
        
        --color-danger-subtle: rgba(239, 68, 68, 0.15);
        --color-danger: #ef4444;
        --color-warning-subtle: rgba(245, 158, 11, 0.15);
        --color-warning: #f59e0b;
        --color-success: #10B981;
        --color-success-subtle: rgba(16, 185, 129, 0.15);
        
        --shadow-sm: 0 1px 2px rgba(0,0,0,0.5);
        --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.5), 0 2px 4px -2px rgba(0,0,0,0.5);
    }
}