:root {
    /* Brand */
    --brand-primary: #FF6B35;
    --brand-primary-dark: #E85A2A;
    --brand-secondary: #FFC107;
    --brand-secondary-dark: #F5A623;
    --brand-gradient: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-secondary) 100%);
    --brand-gradient-deep: linear-gradient(135deg, var(--brand-primary-dark) 0%, var(--brand-primary) 100%);

    /* Neutrals */
    --bg-page: #FFF8F3;
    --bg-surface: #FFFCF8;
    --bg-muted: #F5F5F5;
    --border-subtle: #E5E7EB;
    --text-primary: #1F2937;
    --text-secondary: #6B7280;
    --text-inverse: #FFFFFF;

    /* Sidebar (owner/admin staff portals) */
    --sidebar-bg: #2B2118;
    --sidebar-bg-active: #3D2E1F;
    --sidebar-text: #F3E9DD;
    --sidebar-text-muted: #B8A896;

    /* Semantic */
    --color-success: #16A34A;
    --color-success-bg: #DCFCE7;
    --color-warning: #F59E0B;
    --color-warning-bg: #FEF3C7;
    --color-danger: #DC2626;
    --color-danger-bg: #FEE2E2;
    --color-info: #2563EB;
    --color-info-bg: #DBEAFE;

    /* Elevation / shape */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.09);
    --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.13);
    --shadow-lg: 0 10px 28px rgba(0, 0, 0, 0.18);

    /* Layout */
    --sidebar-width: 260px;
    --page-gutter: 35px;
    --tap-target: 44px;
}

@media (max-width: 768px) {
    :root {
        --page-gutter: 20px;
    }
}

@media (max-width: 480px) {
    :root {
        --page-gutter: 14px;
    }
}

/* Shared responsive base (loaded on every page before the page stylesheet) */
html {
    -webkit-text-size-adjust: 100%;
}

img,
svg,
video {
    max-width: 100%;
}

input,
select,
textarea,
button {
    max-width: 100%;
}

/* Wide tables scroll inside their own container instead of the page */
.table-scroll {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table-scroll > table {
    margin-top: 0;
}

/* Hamburger button used by the staff sidebars and the customer navbar */
.menu-toggle {
    display: none;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: var(--tap-target);
    height: var(--tap-target);
    padding: 0;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    background: var(--bg-surface);
    color: var(--text-primary);
    cursor: pointer;
}

.menu-toggle:focus-visible {
    outline: 2px solid var(--brand-primary);
    outline-offset: 2px;
}

.menu-toggle svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
}