/* ===== FONTS ===== */
@font-face {
    font-family: 'DIN Pro';
    src: local('DIN Pro'), local('DINPro');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'DIN Pro';
    src: local('DIN Pro Bold'), local('DINPro-Bold'), local('DIN Pro');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'DIN Pro';
    src: local('DIN Pro Italic'), local('DINPro-Italic'), local('DIN Pro');
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: 'DIN Pro';
    src: local('DIN Pro Bold Italic'), local('DINPro-BoldItalic'), local('DIN Pro');
    font-weight: 700;
    font-style: italic;
}

/* ===== CSS VARIABLES ===== */
:root {
    /* Brand colors inspired by the target direction */
    --bg: #f5f1ec;
    --surface: #ffffff;
    --surface-soft: #faf7f3;
    --text: #0e0e0f;
    --muted: #6e6262;
    --white: #ffffff;
    --black: #000000;
    --border: rgba(0, 0, 0, 0.14);
    --accent: #c1002a;
    --accent-dark: #9d0022;
    --accent-light: rgba(193, 0, 42, 0.1);
    --accent-medium: rgba(193, 0, 42, 0.2);
    --success: #16885a;
    --success-light: rgba(22, 136, 90, 0.12);
    --error: #c62828;
    --error-light: rgba(198, 40, 40, 0.12);

    /* Layout */
    --radius: 14px;
    --radius-sm: 8px;
    --shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.13);

    /* Typography */
    --font-family: 'DIN Pro', system-ui, -apple-system, sans-serif;
}

/* ===== RESET ===== */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-family);
    background: var(--bg);
    color: var(--text);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/* ===== SHARED UTILITIES ===== */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: 0;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 200ms ease;
    border: 2px solid transparent;
    text-decoration: none;
}

.btn-primary {
    background: var(--accent);
    color: var(--white);
    border-color: var(--accent);
}

.btn-primary:hover:not(:disabled) {
    background: var(--accent-dark);
    border-color: var(--accent-dark);
    color: var(--white);
    transform: translateY(-1px);
}

.btn-secondary {
    background: transparent;
    color: var(--text);
    border-color: var(--text);
}

.btn-secondary:hover {
    border-color: var(--text);
    background: var(--text);
    color: var(--white);
}