:root {
    --gutter: 1rem;
    --max-width: 1200px;
    --bp-md: 700px; /* tablet breakpoint (max-width) */
    --bp-sm: 400px; /* mobile breakpoint (max-width) */
    --color-corporate: #dc7522;

    /* Header variables */
    --header-bg: #D86C00;
    --header-color: #ffffff;
    --header-font-size: 18px;

    /* Navbar variables */
    --navbar-bg: #ffffff;
    --navbar-color: #000000;
    --navbar-padding-y: 2rem;
    --navbar-padding-x: 2rem;
    --navbar-item-gap: 4rem;
    --navbar-font-size: 24px;

    /* Footer variables */
    --footer-bg: #ffffff;
    --footer-color-header: #646363;
    --footer-color-text: #000000;

    /* Surface/text variables for global light mode */
    --page-bg: #f4f6f8;
    --page-text: #1f2933;
    --surface-bg: #ffffff;
    --border-color: #d8dde3;
    --muted-text: #5f6b76;
    --input-bg: #ffffff;
}

[data-theme='dark'] {
    --header-bg: #111827;
    --header-color: #f8fafc;

    --navbar-bg: #1f2937;
    --navbar-color: #f1f5f9;

    --footer-bg: #111827;
    --footer-color-header: #e5e7eb;
    --footer-color-text: #f8fafc;

    --page-bg: #0b1220;
    --page-text: #e5e7eb;
    --surface-bg: #111827;
    --border-color: #334155;
    --muted-text: #94a3b8;
    --input-bg: #0f172a;
}

body {
    background: var(--page-bg);
    color: var(--page-text);
}