:root {
    /* Typography */
    --hp-font-family-base: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
    --hp-font-family-display: "Roboto Flex", "Noto Sans JP", sans-serif;
    --hp-font-family-numeric: "Lato", "Roboto Flex", sans-serif;
    --hp-font-size-body-compact: 0.875rem;
    --hp-font-size-body-wide: 1rem;
    --hp-line-height-body-compact: 1.8;
    --hp-line-height-body-wide: 1.85;
    --hp-font-weight-regular: 400;
    --hp-font-weight-medium: 500;
    --hp-font-weight-bold: 700;

    /* Legacy-derived palette */
    --hp-color-text: #192634;
    --hp-color-text-muted: #3e597b;
    --hp-color-surface: #ffffff;
    --hp-color-surface-muted: #f2f5f9;
    --hp-color-surface-monthly-soft: #fff7eb;
    --hp-color-border: #ced6e0;
    --hp-color-shadow: #d5d6d5;
    --hp-color-link: #246abf;
    --hp-color-favorite: #ff757f;
    --hp-color-category-monthly: #ff8800;
    --hp-color-category-rizapa: #009ee7;
    --hp-color-category-hourly: #50965a;
    --hp-color-category-hourly-action: #376f41;
    --hp-color-category-monthly-text: #9a4d00;
    --hp-color-category-rizapa-text: #006a99;
    --hp-color-on-monthly: #192634;
    --hp-color-on-rizapa: #192634;
    --hp-color-on-hourly-action: #ffffff;
    --hp-color-on-link: #ffffff;
    --hp-color-on-breadcrumb: #ffffff;

    /* Availability. Label text remains mandatory; color is supplementary. */
    --hp-color-status-available-bg: #ffffff;
    --hp-color-status-available-fg: #192634;
    --hp-color-status-congested-bg: #ff8800;
    --hp-color-status-congested-fg: #192634;
    --hp-color-status-inquiry-bg: #ff7e8d;
    --hp-color-status-inquiry-fg: #192634;
    --hp-color-status-waitlist-bg: #246abf;
    --hp-color-status-waitlist-fg: #ffffff;
    --hp-color-status-full-bg: #000000;
    --hp-color-status-full-fg: #ffffff;
    --hp-color-status-unknown-bg: #ffffff;
    --hp-color-status-unknown-fg: #3e597b;
    --hp-color-status-unknown-border: #6c7a8f;

    /* Content states */
    --hp-color-state-error: #a52a20;
    --hp-color-state-error-soft: #fff1ef;
    --hp-color-state-notice: #875400;
    --hp-color-state-notice-soft: #fff7e8;

    /* Layout and spacing */
    --hp-content-max-width: 1140px;
    --hp-gutter-inline: 16px;
    --hp-header-height-compact: 104px;
    --hp-header-height-wide: 60px;
    --hp-space-1: 4px;
    --hp-space-2: 8px;
    --hp-space-3: 12px;
    --hp-space-4: 16px;
    --hp-space-5: 20px;
    --hp-space-6: 24px;
    --hp-space-8: 32px;
    --hp-space-10: 40px;
    --hp-space-12: 48px;
    --hp-space-15: 60px;

    /* Shape, elevation, motion, focus */
    --hp-radius-small: 3px;
    --hp-radius-medium: 4px;
    --hp-radius-large: 10px;
    --hp-radius-pill: 999px;
    --hp-shadow-raised-compact: 0 3px 0 var(--hp-color-shadow);
    --hp-shadow-raised-wide: 0 8px 0 var(--hp-color-shadow);
    --hp-duration-fast: 200ms;
    --hp-duration-normal: 300ms;
    --hp-focus-ring: 3px solid var(--hp-color-link);
    --hp-focus-offset: 3px;
}