/* variables.css — Root theme variables for Roon N&S Glow */

:root {
    /* Core Colors - Luxury Dark & Gold */
    --gold: #c9a96e;
    --gold-dark: #a8824f;
    --gold-light: #e6d5b0;
    --ink: #1a1613;
    --ink-light: #2d2420;
    --cream: #faf6ef;
    --cream-2: #f2ead9;
    --line: #e9e0cd;
    
    /* Semantic Colors */
    --red: #d32f2f;
    --red-bg: #ffebee;
    --green: #2e7d32;
    --green-bg: #e8f5e9;
    --blue: #1976d2;
    --blue-bg: #e3f2fd;
    --text-dim: #8a7f70;
    
    /* Shadows */
    --shadow: 0 4px 12px rgba(26,22,19,0.06);
    --shadow-hover: 0 8px 24px rgba(26,22,19,0.12);
    --shadow-float: 0 12px 32px rgba(26,22,19,0.2);
    
    /* Safe Area for Mobile Web App */
    --sab: env(safe-area-inset-bottom, 20px);
}

body {
    margin: 0;
    font-family: 'Inter', sans-serif;
    background-color: var(--cream);
    color: var(--ink);
    -webkit-tap-highlight-color: transparent;
}

#app {
    max-width: 480px;
    margin: 0 auto;
    background: var(--cream);
    min-height: 100vh;
    position: relative;
    box-shadow: 0 0 40px rgba(0,0,0,0.05);
    padding-top: 56px;
    padding-bottom: calc(70px + var(--sab));
    overflow-x: hidden;
}

#main-content {
    min-height: calc(100vh - 126px - var(--sab));
}