@layer theme {
    :root {
        --font-sans: 'Golos Text', system-ui, sans-serif;
        --font-sans-accent: 'Geologica', sans-serif;
        --bg: #f4f6f9;
        --surface: #fff;
        --border: #e4e8ef;
        --border-light: #eef1f6;
        --border-hover: #0d4a9e;
        --ink: #0f1b2d;
        --ink-mid: #3a4a5c;
        --ink-soft: #6b7a8d;
        --accent: #1a6bcc;
        --accent-dark: #0d4a9e;
        --accent-light: #e8f0fb;
        --green: #16a34a;
        --green-light: #dcfce7;
        --amber: #d97706;
        --amber-light: #fef3c7;
        --red: #dc2626;
        --red-hover: #b91c1c;
        --red-light: #fee2e2;
        --gray: #9ca3af;
        --gray-light: #e3e5e8;
        --backdrop: rgba(from var(--bg) R G B / 75%);
        --photo-bg: #1a2533;
        --free-legend: #86c765;
        --free-bg: #b6e3a0;
        --free-bg-hover: #a9dc90;
        --free-color: #24632f;
        --reserved-legend: #f0b03c;
        --reserved-bg: #fcd88f;
        --reserved-bg-hover: #fad07c;
        --reserved-color: #8a5406;
        --sold-legend: #aab3bf;
        --sold-bg: #ccd2da;
        --sold-color: #5c6675;
        --r: 10px;
        --sh: 0 1px 3px rgba(15,27,45,.07), 0 4px 12px rgba(15,27,45,.05);
        --sh-md: 0 4px 20px rgba(15,27,45,.12), 0 16px 48px rgba(15,27,45,.08);
        --sh-pop: 0 4px 20px rgba(15,27,45,.13), 0 16px 48px rgba(15,27,45,.09);
        --hh: 54px;
    }
}