/* Shared design values. Use semantic tokens instead of page-specific colors. */
:root {
    /* CSS media queries use these same literal boundaries; JS reads these tokens. */
    --breakpoint-tablet: 768px;
    --breakpoint-desktop: 1200px;
    /* Brand and interaction */
    --color-primary: #EA939C;
    --color-primary-hover: #e4818c;
    --color-primary-active: #da737f;
    --color-focus: #a45561;

    /* Text roles */
    --color-text-primary: #161616;
    --color-text-secondary: #625b5e;
    --color-text-muted: #756c6e;
    --color-text-placeholder: var(--color-text-muted);
    --color-text-accent: #96515a;
    --color-text-error: #a52338;
    --color-text-inverse: #fff;
    --color-text-on-primary: var(--color-text-primary);

    /* Surfaces and borders */
    --color-surface: #fff;
    --color-surface-header: rgb(255 255 255 / 50%);
    --color-surface-footer: rgb(255 255 255 / 50%);
    --color-surface-hover: #faf5f6;
    --color-surface-brand: #fcf2f4;
    --color-surface-selected: #fff5f7;
    --color-surface-glass: rgb(255 255 255 / 68%);
    --blur-glass: 20px;
    --saturation-glass: 130%;
    --shadow-glass: 0 12px 40px rgb(22 22 22 / 7%);
    --color-border: #e8e8e8;
    --color-border-input: #d8cfd1;
    --color-border-selected: #ba6d79;
    --color-border-error: #b1273b;
    --color-overlay: rgb(0 0 0 / 35%);
    --color-overlay-light: rgb(255 255 255 / 18%);

    /* Existing site styles keep using these aliases. */
    --color-text: var(--color-text-primary);
    --color-background: var(--color-surface);

    /* UI typography, shape and motion */
    --font-size-body: 16px;
    --font-size-label: 13px;
    --font-size-button: 14px;
    --font-size-button-large: 18px;
    --font-size-button-mobile: 13px;
    --font-size-button-large-mobile: 16px;
    --font-size-button-small-mobile: 12px;
    --font-size-step: 20px;
    --font-size-small: 12px;
    --font-size-caption: 10px;
    --radius-control: 4px;
    --radius-panel: 8px;
    --stroke-default: 1px;
    --stroke-emphasis: 2px;
    --control-height: 48px;
    --control-height-large: 56px;
    --icon-size-small: 16px;
    --icon-size-default: 20px;
    --icon-size-large: 24px;
    --icon-target-size: 44px;
    --transition-ui: 160ms ease;
    --transition-color: 420ms ease;
    --duration-accordion: 280ms;
    --shadow-popover: 0 16px 48px rgb(22 22 22 / 14%);
}