/* Global CSS Design System for ReachTo App */

:root {
    /* Background */
    --bg-dark: #DCC832;
    /* Main mustard background */
    --bg-card: #F6F0D7;
    /* Warm cream panel */

    /* Primary Action */
    --primary-color: #FCE539;
    /* Bright yellow accent */
    --primary-hover: #E9D126;

    --accent-glow: rgba(252, 229, 57, 0.35);

    /* Text */
    --text-white: #1B1816;
    /* Deep charcoal */
    --text-pure-white: #FFFDF8;

    --text-muted: #7B6542;
    /* Muted brown */
    --text-muted-dark: #4E4030;

    /* Borders */
    --border-color: rgba(60, 50, 35, 0.12);
    --border-focus: #C9A62C;

    /* States */
    --color-error: #D94A38;
    --bg-error: rgba(217, 74, 56, 0.12);
    --border-error: rgba(217, 74, 56, 0.25);

    --color-success: #6E9F3F;
    --bg-success: rgba(110, 159, 63, 0.15);
    --border-success: rgba(110, 159, 63, 0.25);
}

/* Base resets */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: var(--bg-dark);
    color: var(--text-white);
    font-family: 'Outfit', sans-serif;
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

input,
button {
    font-family: inherit;
    font-size: inherit;
    outline: none;
}

.hidden {
    display: none !important;
}

/* Header Navigation Styling */
.header-logo {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.header-nav {
    display: flex;
    gap: 10px;
    align-items: center;
}

.nav-tab {
    text-decoration: none;
    color: #000000;
    font-weight: 700;
    font-size: 0.9rem;
    padding: 6px 12px;
    border-radius: 6px;
    border: 2px solid transparent;
    transition: all 0.2s ease;
}

.nav-tab:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.nav-tab.active {
    background-color: var(--primary-color);
    border-color: #000000;
    box-shadow: 2px 2px 0px #000000;
}