/*
 * Copyright (c) 2026 Philip Necsulescu.
 * All rights reserved.
 */

:root {
    --bg: #e5c08a;
    --wood-light: #f2d8a7;
    --wood-mid: #e5c08a;
    --wood-dark: #d4a86d;
    --wood-band-soft: #edd0a0;
    --wood-band-warm: #e0b87d;
    --wood-band-cream: #edce9b;
    --panel: #ffffff;
    --panel-soft: #fff8ef;
    --panel-bright: #fffdf8;
    --panel-glass: rgba(255, 255, 255, 0.28);
    --panel-glass-strong: rgba(255, 255, 255, 0.44);
    --panel-bright-glass: rgba(255, 253, 248, 0.96);
    --panel-bright-strong: rgba(255, 253, 248, 0.98);
    --panel-warm-glass: rgba(255, 250, 243, 0.96);
    --panel-warm-row: rgba(255, 252, 248, 0.9);
    --panel-warm-row-alt: rgba(255, 247, 236, 0.88);
    --panel-soft-glass: rgba(255, 248, 239, 0.88);
    --panel-soft-row: rgba(255, 248, 239, 0.4);
    --panel-muted-gradient: linear-gradient(180deg, rgba(255, 248, 239, 0.96) 0%, rgba(250, 238, 219, 0.9) 100%);
    --panel-hero-gradient: linear-gradient(180deg, rgba(255, 248, 239, 0.95) 0%, rgba(255, 255, 255, 0.92) 100%);
    --panel-feature-gradient: linear-gradient(135deg, rgba(207, 31, 31, 0.1) 0%, rgba(255, 248, 239, 0.94) 36%, rgba(255, 255, 255, 0.95) 100%);
    --ink: #111111;
    --ink-border-soft: rgba(17, 17, 17, 0.32);
    --ink-strong-soft: rgba(17, 17, 17, 0.78);
    --ink-strong: rgba(17, 17, 17, 0.84);
    --muted: #4a3726;
    --muted-70: rgba(74, 55, 38, 0.7);
    --muted-warm: rgba(84, 62, 62, 0.82);
    --muted-warm-soft: rgba(84, 62, 62, 0.76);
    --muted-rose: rgba(138, 99, 99, 0.72);
    --muted-rose-border: rgba(138, 99, 99, 0.52);
    --muted-soft: rgba(74, 55, 38, 0.08);
    --muted-border: rgba(74, 55, 38, 0.16);
    --accent: #cf1f1f;
    --accent-dark: #a31515;
    --accent-soft: rgba(207, 31, 31, 0.08);
    --accent-soft-wash: rgba(207, 31, 31, 0.1);
    --accent-soft-strong: rgba(207, 31, 31, 0.12);
    --accent-soft-panel: rgba(207, 31, 31, 0.16);
    --accent-divider: rgba(207, 31, 31, 0.18);
    --accent-rule: rgba(207, 31, 31, 0.22);
    --accent-soft-border: rgba(207, 31, 31, 0.25);
    --accent-underline: rgba(207, 31, 31, 0.35);
    --accent-arrow: rgba(163, 21, 21, 0.45);
    --accent-arrow-muted: rgba(163, 21, 21, 0.22);
    --accent-focus-ring: rgba(163, 21, 21, 0.16);
    --accent-focus-ring-strong: rgba(163, 21, 21, 0.22);
    --ball-dot-yellow: #f4cc22;
    --ball-dot-yellow-soft: rgba(244, 204, 34, 0.08);
    --highlight-pale: #fff3b8;
    --ball-dot-blue: #2b72d6;
    --ball-dot-blue-soft: rgba(43, 114, 214, 0.12);
    --ball-dot-blue-border: rgba(43, 114, 214, 0.28);
    --line: rgba(207, 31, 31, 0.65);
    --success: #2c6a41;
    --success-soft: rgba(44, 106, 65, 0.12);
    --success-border: rgba(44, 106, 65, 0.24);
    --booking-soft: rgba(143, 17, 17, 0.12);
    --booking-subtle: rgba(143, 17, 17, 0.06);
    --booking-border: rgba(163, 21, 21, 0.14);
    --court-divider: rgba(169, 30, 45, 0.18);
    --warning: #8a4b12;
    --warning-soft: rgba(138, 75, 18, 0.1);
    --warning-border: #8a4b12;
    --warning-alt: #8a4f12;
    --warning-alt-soft: rgba(163, 93, 17, 0.12);
    --warning-alt-border: rgba(163, 93, 17, 0.26);
    --info: #1d5d86;
    --info-soft: rgba(29, 93, 134, 0.12);
    --info-border: rgba(29, 93, 134, 0.25);
    --overlay-backdrop: rgba(17, 17, 17, 0.46);
    --shadow-strong: rgba(102, 9, 9, 0.14);
    --shadow-soft: rgba(102, 9, 9, 0.08);
    --shadow-medium: rgba(102, 9, 9, 0.12);
    --shadow-deep: rgba(102, 9, 9, 0.16);
    --white-04: rgba(255, 255, 255, 0.04);
    --white-10: rgba(255, 255, 255, 0.1);
    --white-18: rgba(255, 255, 255, 0.18);
    --white-20: rgba(255, 255, 255, 0.2);
    --white-22: rgba(255, 255, 255, 0.22);
    --white-26: rgba(255, 255, 255, 0.26);
    --white-42: rgba(255, 255, 255, 0.42);
    --white-46: rgba(255, 255, 255, 0.46);
    --white-55: rgba(255, 255, 255, 0.55);
    --white-62: rgba(255, 255, 255, 0.62);
    --white-72: rgba(255, 255, 255, 0.72);
    --white-84: rgba(255, 255, 255, 0.84);
    --white-98: rgba(255, 255, 255, 0.98);
    --wood-glow-a: rgba(255, 247, 228, 0.28);
    --wood-glow-b: rgba(255, 243, 219, 0.22);
    --wood-wash: rgba(151, 106, 49, 0.06);
    --wood-line-light: rgba(255, 247, 229, 0.14);
    --wood-line-dark: rgba(160, 120, 67, 0.12);
    --wood-grain: rgba(154, 118, 68, 0.08);
    --wood-grain-light: rgba(255, 244, 221, 0.08);
    --wood-plank-line: rgba(167, 126, 72, 0.08);
    --menu-bar-desktop-height: 48px;
    --menu-bar-desktop-field-height: 40px;
    --menu-bar-desktop-border-width: 4px;
    --menu-bar-desktop-action-width: 48px;
    --menu-bar-desktop-icon-size: 16px;
    --menu-bar-desktop-font-size: 16px;
    --menu-bar-desktop-line-height: 20px;
    --menu-bar-mobile-height: 20px;
    --menu-bar-mobile-field-height: 20px;
    --menu-bar-mobile-border-width: 4px;
    --menu-bar-mobile-action-width: 20px;
    --menu-bar-mobile-icon-size: 8px;
    --menu-bar-mobile-font-size: 8px;
    --menu-bar-mobile-line-height: 12px;
    --location-navbar-row-height: var(--menu-bar-desktop-height);
    --catalog-table-header-height: var(--menu-bar-desktop-height);
    --location-navbar-rows: 1;
    --location-navbar-height: calc(var(--location-navbar-row-height) * var(--location-navbar-rows));
    --mobile-body-font-size: 12px;
    --mobile-body-line-height: 16px;
    --font-size-small: 12px;
    --font-size-regular: 16px;
    --font-size-large: 24px;
    --h1-font-size: 48px;
    --h2-font-size: 40px;
    --h3-font-size: 20px;
    --mobile-small-line-height: var(--menu-bar-mobile-line-height);
    --menu-bar-compact-height: var(--menu-bar-mobile-height);
    --menu-bar-action-width: var(--menu-bar-mobile-action-width);
    --menu-bar-icon-size: var(--menu-bar-mobile-icon-size);
    --menu-bar-font-size: var(--menu-bar-desktop-font-size);
    --menu-bar-line-height: var(--menu-bar-desktop-line-height);
    --menu-bar-background: var(--accent);
    --menu-bar-action-background: var(--accent-dark);
    --menu-bar-action-color: var(--panel);
    --menu-bar-field-background: var(--panel-bright);
    --menu-bar-field-color: var(--ink);
    --menu-bar-hover-background: var(--ball-dot-yellow);
    --menu-bar-hover-color: var(--ink);
    --menu-bar-border-width: var(--menu-bar-desktop-border-width);
    --location-navbar-width: 1120px;
    --location-navbar-location-width: 200px;
    --location-navbar-search-width: 472px;
    --location-navbar-search-button-width: var(--menu-bar-desktop-action-width);
    --filters-menu-width: 1120px;
    --filters-menu-search-width: 544px;
    --filters-menu-booking-width: 184px;
    --filters-menu-more-width: 208px;
    --sort-menu-width: 356px;
    --sort-menu-label-width: 48px;
    --sort-menu-select-width: 308px;
    --detail-body-text-size: 16px;
    --card-padding-y: 24px;
    --card-padding-x: 24px;
    --card-inner-padding-y: 16px;
    --card-inner-padding-x: 16px;
    --card-border-external: 8px;
    --card-border-internal: 4px;
    --card-heading-gap: 8px;
    --card-label-content-gap: 8px;
    --card-section-gap: 16px;
    --card-copy-gap: 8px;
    --card-label-gap: 12px;
}

@media (max-width: 800px) {
    :root {
        --location-navbar-row-height: var(--menu-bar-mobile-height);
        --location-navbar-rows: 1;
        --menu-bar-font-size: var(--menu-bar-mobile-font-size);
        --menu-bar-line-height: var(--menu-bar-mobile-line-height);
        --menu-bar-border-width: var(--menu-bar-mobile-border-width);
    }
}