:root {
    /*
     * Highest-level public width control.
     * All public page containers are subordinated to this value.
     * Change this once to adjust the main site width globally.
     */
    --site-container: 1180px;

    /* Container aliases. Wide and normal both use the global site width. */
    --container-wide: var(--site-container);
    --container-normal: var(--site-container);

    /* Main public content follows the same global site width. */
    --container-readable: var(--site-container);
    --container-narrow: 720px;

    --page-padding-desktop: 24px;
    --page-padding-tablet: 20px;
    --page-padding-mobile: 16px;

    /* Typography system */
    --font-base: 'Montserrat', sans-serif;

    --font-size-body: 15px;
    --font-size-small: 13px;
    --font-size-caption: 12px;

    --line-height-body: 1.55;
    --line-height-heading: 1.2;

    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    --section-gap: 32px;
    --block-gap: 24px;
    --card-gap: 20px;

    --color-bg: #faf8f5;
    --color-page-bg: var(--color-bg);
    --color-surface: #ffffff;
    --color-soft: #f3eee7;

    --color-text: #222222;
    --color-muted: #6f6f6f;
    --color-text-light: #ffffff;

    --color-primary: #1f1f1f;
    --color-primary-hover: #2c2c2c;
    --color-accent: #a8824c;
    --color-accent-hover: #937143;
    --color-accent-soft: #c7a572;
    --color-accent-contrast: #ffffff;

    --color-border: #e7e0d6;
    --color-border-soft: #f0ebe4;

    --color-danger: #b84a4a;
    --color-error: #b84a4a;
    --color-warning: #b68b2d;
    --color-success: #4d7c59;

    --radius-card: 16px;
    --radius-panel: 24px;
    --radius-control: 10px;

    --shadow-card: 0 16px 42px rgba(31, 31, 31, 0.07);
    --shadow-panel: 0 18px 50px rgba(31, 31, 31, 0.08);

    --transition-base: 180ms ease;
    --z-sticky: 20;
}