/* ========================================
   CSS VARIABLES - Design Tokens
   ======================================== */

html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

html {
    /* Scale down the entire UI globally by reducing root font-size from 16px to 14px (approx 87.5% size). 
       This shrinks all rem-based sizes (padding, margin, width, text) natively. */
    font-size: 14px;
    box-sizing: border-box;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

:root {
    /* Safe Area Variables */
    --safe-area-bottom: env(safe-area-inset-bottom, 0px);

    /* Rundown Theming Variables */
    --rundown-bg: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    --rundown-header-bg: rgba(15, 23, 42, 0.8);
    --rundown-row-hover: rgba(99, 102, 241, 0.15);
    --rundown-border: rgba(71, 85, 105, 0.5);
    --rundown-text: #f1f5f9;
    --rundown-text-muted: #94a3b8;
    --rundown-accent: #6366f1;
    --rundown-accent-light: #818cf8;
    --rundown-success: #10b981;
    --rundown-warning: #f59e0b;
    --rundown-danger: #ef4444;
    --rundown-row-spacing: 1rem;
    --rundown-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --glass-bg: rgba(30, 41, 59, 0.7);
    --glass-border: rgba(148, 163, 184, 0.1);

    /* Bottom Nav */
    --bottom-nav-height: 3.5rem;
    --bottom-nav-bg: rgba(17, 21, 24, 0.92);
    --bottom-nav-active: #2b9dee;
    --bottom-nav-inactive: #586470;

    /* Responsive Spacing */
    --panel-padding: 1rem;
    --header-height: 3.5rem;
}