:root {
    /* === Surface palette === */
    --color-bg: #eef4fb;
    --color-surface: #ffffff;
    --color-surface-soft: #f5f9fc;
    --color-surface-deep: #e7f0f8;
    --color-text: #102331;
    --color-muted: #5e7282;
    --color-border: #d7e3ee;
    --color-border-soft: rgba(36, 107, 151, .12);

    /* === Brand === */
    --color-primary: #246b97;
    --color-primary-hover: #1c5779;
    --color-primary-soft: rgba(36, 107, 151, .10);
    --color-secondary: #80cad8;
    --color-secondary-soft: rgba(128, 202, 216, .22);
    --color-accent: #5ca98b;

    /* === Weather semantics === */
    --color-sun: #f5b84b;
    --color-sun-soft: #fff4d8;
    --color-sun-text: #7e5704;
    --color-cloud: #d7e3ea;
    --color-rain: #4b9ed8;
    --color-rain-soft: #e1f0fb;
    --color-night: #17324a;
    --color-night-soft: #e8eef6;
    --color-night-text: #17324a;

    /* === Status === */
    --color-danger: #d9534f;
    --color-warning: #f5b84b;
    --color-success: #5ca98b;
    --color-focus: #80cad8;

    /* === Geometry === */
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 22px;
    --radius-xl: 28px;
    --radius-pill: 999px;

    /* === Elevation === */
    --shadow-soft: 0 14px 38px rgba(16, 35, 49, .08);
    --shadow-strong: 0 28px 60px rgba(16, 35, 49, .14);
    --shadow-inset: inset 0 0 0 1px var(--color-border-soft);

    /* === Spacing scale === */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 32px;
    --space-8: 40px;
    --space-9: 56px;

    /* === Typography === */
    --font-family-base: "JoWeather", "Cairo", "Noto Naskh Arabic", "Segoe UI", "Tahoma", sans-serif;
    --font-size-xs: 12px;
    --font-size-sm: 14px;
    --font-size-base: 16px;
    --font-size-lg: 18px;
    --font-size-xl: 22px;
    --font-size-2xl: clamp(22px, 3vw, 28px);
    --font-size-3xl: clamp(28px, 4vw, 38px);
    --font-size-4xl: clamp(32px, 5vw, 50px);
    --line-height-base: 1.72;
    --line-height-tight: 1.2;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 700;
}