:root {
    /* -------------------------------------------------
       Brand
    -------------------------------------------------- */

    --accent: #b9852f;
    --accent-hover: #a57325;

    --accent-soft: rgba(185, 133, 47, 0.10);
    --accent-soft-strong: rgba(185, 133, 47, 0.16);


    /* -------------------------------------------------
       Backgrounds
    -------------------------------------------------- */

    --bg: #f4f2ed;
    --bg-elevated: #f8f7f4;

    --surface: #ffffff;
    --surface-2: #f8f7f4;
    --surface-3: #efede7;

    --surface-dark: #1b1c1e;
    --surface-dark-2: #25272a;


    /* -------------------------------------------------
       Text
    -------------------------------------------------- */

    --text: #202124;
    --text-secondary: #62656b;
    --text-muted: #92959a;

    --text-on-dark: #f8f8f7;


    /* -------------------------------------------------
       Status
    -------------------------------------------------- */

    --success: #29966a;
    --success-soft: rgba(41, 150, 106, 0.10);

    --warning: #c98123;
    --warning-soft: rgba(201, 129, 35, 0.11);

    --danger: #ce4d4d;
    --danger-soft: rgba(206, 77, 77, 0.10);

    --info: #3e79c9;
    --info-soft: rgba(62, 121, 201, 0.10);


    /* -------------------------------------------------
       Borders
    -------------------------------------------------- */

    --border: rgba(25, 27, 31, 0.08);
    --border-strong: rgba(25, 27, 31, 0.14);


    /* -------------------------------------------------
       Radius
    -------------------------------------------------- */

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 17px;
    --radius-xl: 22px;


    /* -------------------------------------------------
       Shadows
    -------------------------------------------------- */

    --shadow-xs:
        0 1px 3px rgba(20, 22, 26, 0.04);

    --shadow-sm:
        0 6px 20px rgba(20, 22, 26, 0.06);

    --shadow-md:
        0 16px 38px rgba(20, 22, 26, 0.10);

    --shadow-lg:
        0 24px 60px rgba(20, 22, 26, 0.14);


    /* -------------------------------------------------
       Layout
    -------------------------------------------------- */

    --container: 1320px;

    --transition: 160ms ease;
}


/* -------------------------------------------------
   Reset
-------------------------------------------------- */

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

html {
    scroll-behavior: smooth;

    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;

    min-height: 100vh;

    background: var(--bg);
    color: var(--text);

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    font-size: 16px;
    line-height: 1.5;

    -webkit-font-smoothing: antialiased;

    text-rendering: optimizeLegibility;
}

img,
svg {
    display: block;

    max-width: 100%;
}

img {
    object-fit: cover;
}

a {
    color: inherit;

    text-decoration: none;

    -webkit-tap-highlight-color: transparent;
}

button,
input,
textarea,
select {
    font: inherit;
}

button {
    border: 0;

    cursor: pointer;

    -webkit-tap-highlight-color: transparent;
}

input,
textarea,
select {
    color: inherit;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 3px solid var(--accent-soft-strong);

    outline-offset: 2px;
}


/* -------------------------------------------------
   Layout
-------------------------------------------------- */

.container {
    width: min(
        calc(100% - 32px),
        var(--container)
    );

    margin-inline: auto;
}


/* -------------------------------------------------
   Global helpers
-------------------------------------------------- */

.hidden {
    display: none !important;
}

.text-muted {
    color: var(--text-muted);
}

.text-secondary {
    color: var(--text-secondary);
}

.text-success {
    color: var(--success);
}

.text-danger {
    color: var(--danger);
}


/* -------------------------------------------------
   Global icon rules
-------------------------------------------------- */

.icon {
    width: 20px;
    height: 20px;

    flex-shrink: 0;

    stroke-width: 1.8;
}

.icon-sm {
    width: 16px;
    height: 16px;
}

.icon-lg {
    width: 24px;
    height: 24px;
}


/* -------------------------------------------------
   Badges
-------------------------------------------------- */

.badge {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 5px;

    min-height: 26px;

    padding: 4px 9px;

    border-radius: 999px;

    font-size: 12px;
    font-weight: 800;
}

.badge-success {
    color: var(--success);

    background: var(--success-soft);
}

.badge-warning {
    color: var(--warning);

    background: var(--warning-soft);
}

.badge-danger {
    color: var(--danger);

    background: var(--danger-soft);
}

.badge-info {
    color: var(--info);

    background: var(--info-soft);
}


/* -------------------------------------------------
   Buttons
-------------------------------------------------- */

.btn {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 8px;

    min-height: 44px;

    padding: 0 16px;

    border-radius: var(--radius-md);

    font-weight: 700;

    transition:
        transform var(--transition),
        background var(--transition),
        border-color var(--transition),
        opacity var(--transition),
        box-shadow var(--transition);
}

.btn:active {
    transform: scale(.985);
}

.btn-primary {
    background: var(--accent);

    color: #fff;

    box-shadow:
        0 8px 20px rgba(185, 133, 47, 0.20);
}

.btn-primary:hover {
    background: var(--accent-hover);
}

.btn-secondary {
    border: 1px solid var(--border);

    background: var(--surface);

    color: var(--text);
}


/* -------------------------------------------------
   Inputs
-------------------------------------------------- */

.input {
    width: 100%;

    min-height: 46px;

    padding: 0 14px;

    border:
        1px solid var(--border);

    border-radius:
        var(--radius-md);

    outline: none;

    background:
        var(--surface);

    color:
        var(--text);

    transition:
        border-color var(--transition),
        box-shadow var(--transition),
        background var(--transition);
}

.input::placeholder {
    color: var(--text-muted);
}

.input:focus {
    border-color:
        rgba(185, 133, 47, 0.45);

    box-shadow:
        0 0 0 4px var(--accent-soft);
}


/* -------------------------------------------------
   Mobile
-------------------------------------------------- */

@media (max-width: 720px) {

    .container {
        width: min(
            calc(100% - 24px),
            var(--container)
        );
    }

}