/* --------------------------------------------------------------------------
   Global design tokens and shared site foundations
   Component- or page-specific rules must live in their matching CSS file.
   -------------------------------------------------------------------------- */

:root {
    --color-bg: #fffaf2;
    --color-surface: #ffffff;
    --color-text: #27160d;
    --color-muted: #766a63;
    --color-border: #eadfd4;
    --color-brand: #ff721f;
    --color-brand-dark: #d94d00;
    --color-dark: #2a1408;
    --color-gold: #ffb43f;
    --font-body: "Nunito Sans", Arial, sans-serif;
    --shadow-soft: 0 1.25rem 3.5rem rgba(83, 48, 23, 0.12);
    --radius-lg: 1.75rem;
}

html {
    scroll-behavior: smooth;
}

body {
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
    line-height: 1.65;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Baloo 2", "Nunito Sans", sans-serif;
    letter-spacing: -0.035em;
}

a {
    color: inherit;
}

.site-wrapper {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    overflow: hidden;
}

.site-main {
    flex: 1;
}

.btn-cubsky,
.btn-cubsky-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    min-height: 3rem;
    padding: 0.7rem 1.25rem;
    border-radius: 0.7rem;
    font-weight: 750;
    text-decoration: none;
}

.btn-cubsky {
    border: 1px solid var(--color-brand);
    background: var(--color-brand);
    color: #fff;
    box-shadow: 0 0.7rem 1.5rem rgba(255, 114, 31, 0.24);
}

.btn-cubsky:hover {
    border-color: var(--color-brand-dark);
    background: var(--color-brand-dark);
    color: #fff;
}

.btn-cubsky-outline {
    border: 1px solid var(--color-border);
    background: #fff;
    color: var(--color-text);
}

.btn-cubsky-outline:hover {
    border-color: var(--color-brand);
    color: var(--color-brand-dark);
}