:root {
    --bg-color: #edf1f7;
    --main-container-bg: #fcfdff;
    --text-primary: #18212d;
    --text-secondary: #5b6879;
    --accent: #1967d2;
    --accent-primary: var(--accent);
    --accent-soft: rgba(25, 103, 210, 0.1);
    --accent-soft-strong: rgba(25, 103, 210, 0.18);
    --surface-tint: rgba(25, 103, 210, 0.08);
    --surface-tint-strong: rgba(25, 103, 210, 0.14);

    /* Нові кольори: Сірий для роботи, Зелений для вихідних */
    --work-bg: #dbe7f3;
    --work-text: #122033;
    --off-bg: #1f9d73;
    --off-text: #ffffff;

    --holiday-color: #C89B3C;
    --holiday-marker-ring: rgba(252, 253, 255, 0.96);
    --holiday-marker-shadow: 0 3px 8px rgba(200, 155, 60, 0.18);
    --holiday-day-ring: rgba(200, 155, 60, 0.52);
    --holiday-day-glow: 0 0 0 1px rgba(200, 155, 60, 0.34), 0 6px 12px rgba(200, 155, 60, 0.1);
    --glass-bg: transparent;
    --glass-border: transparent;
    --card-border: rgba(24, 33, 45, 0.16);
    --card-border-strong: rgba(24, 33, 45, 0.24);
    --card-shadow: 0 1px 2px rgba(24, 33, 45, 0.1), 0 10px 20px rgba(24, 33, 45, 0.08);
    --card-hover-shadow: 0 2px 6px rgba(24, 33, 45, 0.12), 0 14px 24px rgba(24, 33, 45, 0.1);
    --card-highlight: none;
    --card-depth-shadow: none;
    --surface-control: #e8edf5;
    --surface-control-hover: #dde5f0;
    --surface-control-strong: #e5ebf3;
    --surface-control-strong-hover: #d9e2ee;
    --surface-shell-border: rgba(24, 33, 45, 0.08);
    --surface-shell-shadow: 0 8px 24px rgba(24, 33, 45, 0.14);
    --surface-shell-gloss: none;
    --surface-shell-gloss-strong: none;
    --surface-panel-elevated-shadow: 0 1px 2px rgba(24, 33, 45, 0.08), 0 6px 16px rgba(24, 33, 45, 0.06);
    --surface-panel-elevated-shadow-hover: 0 2px 6px rgba(24, 33, 45, 0.12), 0 10px 18px rgba(24, 33, 45, 0.08);
    --surface-panel-gloss: none;
    --surface-panel-accent: #edf3ff;
    --surface-panel-accent-border: rgba(25, 103, 210, 0.16);
    --surface-panel-accent-shadow: 0 1px 2px rgba(25, 103, 210, 0.08);
    --surface-panel-subtle: #f8faff;
    --surface-panel-subtle-border: rgba(24, 33, 45, 0.08);
    --surface-panel-subtle-shadow: 0 1px 2px rgba(24, 33, 45, 0.05);
    --surface-panel-muted: #eef3f9;
    --surface-panel-muted-border: var(--card-border);
    --surface-panel-muted-shadow: 0 1px 2px rgba(24, 33, 45, 0.04);
    --surface-panel-danger: #fff4f3;
    --surface-panel-danger-border: rgba(210, 54, 47, 0.18);
    --surface-panel-danger-text: #b3261e;
    --surface-panel-danger-button: #fff6f5;
    --surface-panel-danger-button-hover: #ffeceb;
    --surface-panel-danger-button-border: rgba(255, 59, 48, 0.22);
    --surface-input: #f2f6fb;
    --surface-badge: #edf3ff;
    --surface-badge-shadow: none;
    --surface-danger-badge: rgba(255, 59, 48, 0.08);
    --surface-button-accent: #1967d2;
    --surface-button-accent-border: #1967d2;
    --surface-button-accent-shadow: 0 1px 2px rgba(25, 103, 210, 0.24), 0 6px 16px rgba(25, 103, 210, 0.18);
    --radius-panel: 28px;
    --radius-surface-lg: 24px;
    --radius-surface-md: 20px;
    --radius-surface-sm: 18px;
    --radius-field: 18px;
    --radius-button: 20px;
    --radius-button-compact: 16px;
    --radius-pill: 999px;
    --space-inline-control: 16px;
    --space-block-control: 14px;
    --space-inline-button: var(--space-5);
    --space-block-button: var(--space-4);
    --space-inline-button-compact: var(--space-4);
    --space-block-button-compact: var(--space-3);
    --field-radius: var(--radius-field);
    --field-padding: var(--space-block-control) var(--space-inline-control);
    --field-min-height: 56px;
    --type-display-page-size: clamp(28px, 4vw, 34px);
    --type-display-page-line: 0.96;
    --type-display-page-track: -0.06em;
    --type-display-modal-size: 26px;
    --type-display-modal-line: 1.1;
    --type-display-modal-track: -0.04em;
    --type-display-setup-size: 28px;
    --type-display-setup-line: 1.1;
    --type-title-section-size: 17px;
    --type-title-section-line: 1.2;
    --type-title-section-track: -0.03em;
    --type-title-card-size: 15px;
    --type-title-card-line: 1.3;
    --type-title-card-track: -0.01em;
    --type-body-md-size: 14px;
    --type-body-md-line: 1.45;
    --type-body-ui-size: 13px;
    --type-body-ui-line: 1.45;
    --type-body-sm-size: 12px;
    --type-body-sm-line: 1.45;
    --type-body-xs-size: 11px;
    --type-body-xs-line: 1.35;
    --type-label-md-size: 13px;
    --type-label-md-line: 1.3;
    --type-label-md-track: 0.01em;
    --type-label-sm-size: 12px;
    --type-label-sm-line: 1.3;
    --type-label-sm-track: 0.02em;
    --type-label-xs-size: 11px;
    --type-label-xs-line: 1.25;
    --type-label-xs-track: 0.04em;
    --type-caption-xxs-size: 10px;
    --type-caption-xxs-line: 1.15;
    --type-number-hero-size: 58px;
    --type-number-hero-line: 1;
    --type-number-hero-track: -2px;
    --type-number-lg-size: 26px;
    --type-number-lg-line: 1;
    --type-number-lg-track: -0.05em;
    --type-number-md-size: 24px;
    --type-number-md-line: 1;
    --type-number-md-track: -0.04em;
    --type-number-sm-size: 22px;
    --type-number-sm-line: 1;
    --type-number-sm-track: -0.04em;
    --type-number-xs-size: 15px;
    --type-number-xs-line: 1;
    --type-number-xs-track: -0.03em;
    --type-number-calendar-size: clamp(17px, 2.5vw, 20px);
    --helper-text-size: var(--type-body-ui-size);
    --helper-line-height: var(--type-body-ui-line);
    --focus-ring-soft: 0 0 0 3px rgba(25, 103, 210, 0.16);
    --focus-ring-strong: 0 0 0 3px rgba(25, 103, 210, 0.22);
    --text-on-accent: #ffffff;
    --text-accent-strong: color-mix(in srgb, var(--accent) 88%, black);
    --interactive-active-bg: color-mix(in srgb, var(--accent-soft-strong) 100%, var(--surface-panel-subtle));
    --interactive-active-bg-soft: color-mix(in srgb, var(--accent-soft-strong) 74%, var(--surface-panel-subtle));
    --interactive-active-border: var(--accent);
    --interactive-active-color: var(--text-accent-strong);
    --interactive-active-shadow: var(--surface-panel-elevated-shadow);
    --interactive-active-inset: inset 0 0 0 1px color-mix(in srgb, white 14%, transparent);
    --modal-overlay: rgba(17, 24, 39, 0.44);
    --shell-radius: var(--radius-panel);
    --panel-radius: var(--radius-panel);
    --control-radius-sm: var(--radius-button-compact);
    --control-radius-md: var(--radius-button);
    --surface-block-radius-lg: var(--radius-surface-lg);
    --surface-block-radius-md: var(--radius-surface-md);
    --surface-block-radius-sm: var(--radius-surface-sm);
    --panel-padding: 24px;
    --surface-block-padding-lg: var(--space-5);
    --surface-block-padding-md: var(--space-4);
    --surface-block-padding-sm: var(--space-3);
    --button-padding-block: var(--space-block-button);
    --button-padding-inline: var(--space-inline-button);
    --button-font-size: var(--type-body-ui-size);
    --button-font-weight: 700;
    --button-letter-spacing: 0;
    --button-min-height: 48px;
    --button-radius: var(--radius-button);
    --button-compact-padding-block: var(--space-block-button-compact);
    --button-compact-padding-inline: var(--space-inline-button-compact);
    --button-compact-radius: var(--radius-button-compact);
    --icon-button-size: 40px;
    --icon-button-size-compact: 32px;
    --icon-button-radius: var(--radius-button-compact);
    --icon-size-inline: 16px;
    --icon-size-button: 18px;
    --icon-size-weather: 24px;
    --icon-weather-badge-size: 46px;
    --icon-stroke-width: 1.9;
    --modal-close-offset: var(--space-7);
    --disclosure-button-radius: 12px;
    --marker-cube-size: 10px;
    --marker-cube-radius: 3px;
    --marker-cube-gap: 3px;
    --marker-cube-font-size: 7px;
    --marker-cube-ring: 0 0 0 1px transparent;
    --section-gap: 16px;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 28px;
    --kicker-bg: #eef3fb;
    --kicker-border: rgba(25, 103, 210, 0.14);
    --base-font-size: 16px;
    --font-family-base: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", sans-serif;
    --font-family-display: var(--font-family-base);
    --font-family-numeric: var(--font-family-base);
    --font-family: var(--font-family-base);
    --page-gradient: linear-gradient(180deg, #eef2f8 0%, #e9eef5 100%);
    --page-side-glow: none;
    --noise-opacity: 0;
    --calendar-day-gloss: transparent;
    --calendar-day-shimmer: transparent;
    --calendar-day-border: rgba(24, 33, 45, 0.12);
    --calendar-day-style-work-bg: linear-gradient(180deg, var(--work-bg-start), var(--work-bg-end));
    --calendar-day-style-off-bg: linear-gradient(180deg, var(--off-bg-start), var(--off-bg-end));
    --calendar-day-style-work-text: var(--work-text);
    --calendar-day-style-off-text: var(--off-text);
    --calendar-today-shadow: 0 0 0 2px rgba(25, 103, 210, 0.28);
    --work-bg-start: var(--work-bg);
    --work-bg-end: var(--work-bg);
    --off-bg-start: var(--off-bg);
    --off-bg-end: var(--off-bg);
    --day-work-shadow: 0 1px 2px rgba(24, 33, 45, 0.06);
    --day-off-shadow: 0 1px 2px rgba(17, 89, 64, 0.18);
    --day-work-hover-shadow: 0 2px 6px rgba(24, 33, 45, 0.08);
    --day-off-hover-shadow: 0 2px 8px rgba(17, 89, 64, 0.22);
    /* Z-index scale */
    --z-base: 1;
    --z-content: 2;
    --z-dots: 3;
    --z-calendar: 5;
    --z-header: 10;
    --z-overlay: 100;
    --z-overlay-settings: 110;
    --z-overlay-profiles: 115;
    --z-overlay-schedule: 120;
    --z-overlay-profile-edit: 130;
    --z-overlay-app-update: 140;
    --z-overlay-color-modal: 150;
    --z-toast: 220;

    /* Icon font-sizes */
    --icon-size-sm: var(--icon-size-inline);
    --icon-size-md: var(--icon-size-button);

    /* Decorative: theme toggle */
    --theme-toggle-size: 18px;
    --theme-toggle-light: #ffd45c;
    --theme-toggle-light-rim: #f4b940;
    --theme-toggle-dark: #89a4cb;
    --theme-toggle-dark-deep: #5a7196;
    --theme-toggle-auto-dark: #6f85a8;

    /* Danger inline (for action buttons) */
    --danger-soft: rgba(255, 59, 48, 0.13);
    --danger-soft-border: rgba(255, 59, 48, 0.4);

    /* Neutral dot overflow */
    --dot-overflow-bg: #8E8E93;

    --panel-hover-transform: translateY(-1px);
    --icon-hover-transform: translateY(-1px);
    --button-hover-transform: translateY(-1px);
    --calendar-day-hover-transform: translateY(-1px);
    --motion-duration-fast: 0.16s;
    --motion-duration-base: 0.22s;
    --motion-duration-slow: 0.28s;
    --motion-duration-enter: 0.36s;
    --motion-ease-standard: cubic-bezier(0.22, 0, 0, 1);
    --motion-ease-emphasized: cubic-bezier(0.2, 0.7, 0.2, 1);
    --motion-ease-exit: cubic-bezier(0.4, 0, 0.2, 1);
    --control-transition: background-color var(--motion-duration-fast) var(--motion-ease-exit), color var(--motion-duration-fast) var(--motion-ease-exit), border-color var(--motion-duration-fast) var(--motion-ease-exit), box-shadow var(--motion-duration-fast) var(--motion-ease-exit), transform var(--motion-duration-fast) var(--motion-ease-exit), opacity var(--motion-duration-fast) var(--motion-ease-exit);
    --panel-transition: box-shadow var(--motion-duration-base) var(--motion-ease-exit), transform var(--motion-duration-fast) var(--motion-ease-exit);
    --expand-reveal-offset: calc(var(--space-1) * -1);
    --expand-reveal-size-duration: var(--motion-duration-base);
    --expand-reveal-fade-duration: var(--motion-duration-fast);
    --expand-reveal-easing: var(--motion-ease-standard);
    --overlay-fade-duration: var(--motion-duration-slow);
    --overlay-fade-transition: opacity var(--overlay-fade-duration) var(--motion-ease-exit), backdrop-filter var(--overlay-fade-duration) var(--motion-ease-standard);
    --modal-card-initial-transform: translateY(14px) scale(0.985);
    --modal-card-active-transform: translateY(0) scale(1);
    --modal-card-transition: transform var(--motion-duration-base) var(--motion-ease-standard), opacity var(--motion-duration-fast) var(--motion-ease-exit);
    --panel-enter-animation: panelLiftIn var(--motion-duration-enter) var(--motion-ease-emphasized) both;
    --calendar-enter-animation: fluidIn var(--motion-duration-enter) var(--motion-ease-standard) forwards;
    --swipe-transition: transform var(--motion-duration-slow) var(--motion-ease-emphasized);
    --swipe-out-left-animation: swipeOut var(--motion-duration-slow) var(--motion-ease-exit) forwards;
    --swipe-out-right-animation: swipeOutRight var(--motion-duration-slow) var(--motion-ease-exit) forwards;
}

[data-theme="dark"] {
    --bg-color: #111318;
    --main-container-bg: #1b1f27;
    --text-primary: #e3e8f2;
    --text-secondary: #b2bccd;
    --accent: #a8c7fa;
    --accent-primary: var(--accent);
    --accent-soft: rgba(168, 199, 250, 0.14);
    --accent-soft-strong: rgba(168, 199, 250, 0.22);
    --surface-tint: rgba(168, 199, 250, 0.12);
    --surface-tint-strong: rgba(168, 199, 250, 0.18);

    /* Темна тема кольорів */
    --work-bg: #2a3b52;
    --work-text: #eef4fb;
    --off-bg: #2aa876;
    --off-text: #ffffff;

    --holiday-color: #E2B85B;
    --holiday-marker-ring: rgba(18, 26, 40, 0.98);
    --holiday-marker-shadow: 0 3px 10px rgba(226, 184, 91, 0.22);
    --holiday-day-ring: rgba(226, 184, 91, 0.62);
    --holiday-day-glow: 0 0 0 1px rgba(226, 184, 91, 0.4), 0 6px 14px rgba(226, 184, 91, 0.12);
    --glass-bg: transparent;
    --glass-border: transparent;
    --card-border: rgba(227, 232, 242, 0.12);
    --card-border-strong: rgba(227, 232, 242, 0.18);
    --card-shadow: 0 1px 2px rgba(0, 0, 0, 0.26), 0 10px 18px rgba(0, 0, 0, 0.22);
    --card-hover-shadow: 0 2px 4px rgba(0, 0, 0, 0.28), 0 12px 22px rgba(0, 0, 0, 0.22);
    --card-highlight: none;
    --card-depth-shadow: none;
    --surface-control: #242a34;
    --surface-control-hover: #2b3340;
    --surface-control-strong: #262d39;
    --surface-control-strong-hover: #303949;
    --surface-shell-border: rgba(227, 232, 242, 0.08);
    --surface-shell-shadow: 0 16px 28px rgba(0, 0, 0, 0.28);
    --surface-shell-gloss: none;
    --surface-shell-gloss-strong: none;
    --surface-panel-elevated-shadow: 0 1px 2px rgba(0, 0, 0, 0.24), 0 8px 18px rgba(0, 0, 0, 0.18);
    --surface-panel-elevated-shadow-hover: 0 2px 4px rgba(0, 0, 0, 0.26), 0 10px 20px rgba(0, 0, 0, 0.2);
    --surface-panel-gloss: none;
    --surface-panel-accent: #213248;
    --surface-panel-accent-border: rgba(168, 199, 250, 0.18);
    --surface-panel-accent-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
    --surface-panel-subtle: #20252e;
    --surface-panel-subtle-border: rgba(227, 232, 242, 0.08);
    --surface-panel-subtle-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
    --surface-panel-muted: #202733;
    --surface-panel-muted-border: var(--card-border);
    --surface-panel-muted-shadow: 0 1px 2px rgba(0, 0, 0, 0.14);
    --surface-panel-danger: #3b1d1f;
    --surface-panel-danger-border: rgba(255, 180, 171, 0.18);
    --surface-panel-danger-text: #ffb4ab;
    --surface-panel-danger-button: #4a2426;
    --surface-panel-danger-button-hover: #5a2d30;
    --surface-panel-danger-button-border: rgba(255, 69, 58, 0.22);
    --surface-input: #242a34;
    --surface-badge: #243447;
    --surface-badge-shadow: none;
    --surface-danger-badge: rgba(255, 69, 58, 0.12);
    --surface-button-accent: #4f8df7;
    --surface-button-accent-border: #5d98ff;
    --surface-button-accent-shadow: 0 2px 6px rgba(79, 141, 247, 0.34), 0 10px 22px rgba(0, 0, 0, 0.24);
    --field-radius: 18px;
    --field-padding: 14px 16px;
    --helper-text-size: 13px;
    --helper-line-height: 1.55;
    --focus-ring-soft: 0 0 0 3px rgba(168, 199, 250, 0.18);
    --focus-ring-strong: 0 0 0 3px rgba(168, 199, 250, 0.26);
    --text-on-accent: #f7fbff;
    --text-accent-strong: color-mix(in srgb, var(--accent) 84%, white);
    --interactive-active-bg: linear-gradient(
        180deg,
        color-mix(in srgb, var(--accent) 26%, #2a3950) 0%,
        color-mix(in srgb, var(--accent) 18%, #223046) 100%
    );
    --interactive-active-bg-soft: linear-gradient(
        180deg,
        color-mix(in srgb, var(--accent) 22%, #29374c) 0%,
        color-mix(in srgb, var(--accent) 14%, #202c40) 100%
    );
    --interactive-active-border: color-mix(in srgb, var(--accent) 72%, white 18%);
    --interactive-active-color: var(--text-on-accent);
    --interactive-active-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 6px 14px rgba(6, 12, 20, 0.18);
    --interactive-active-inset: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    --modal-overlay: rgba(8, 11, 17, 0.64);
    --page-gradient: linear-gradient(180deg, #111318 0%, #171b22 100%);
    --page-side-glow: none;
    --noise-opacity: 0;
    --calendar-day-gloss: transparent;
    --calendar-day-shimmer: transparent;
    --calendar-day-border: rgba(227, 232, 242, 0.08);
    --calendar-today-shadow: 0 0 0 2px rgba(168, 199, 250, 0.32);
    --work-bg-start: var(--work-bg);
    --work-bg-end: var(--work-bg);
    --off-bg-start: var(--off-bg);
    --off-bg-end: var(--off-bg);
    --day-work-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
    --day-off-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    --day-work-hover-shadow: 0 2px 4px rgba(0, 0, 0, 0.24);
    --day-off-hover-shadow: 0 2px 4px rgba(0, 0, 0, 0.24);
    --marker-cube-ring: 0 0 0 1px transparent;
    --danger-soft: rgba(255, 69, 58, 0.16);
    --danger-soft-border: rgba(255, 69, 58, 0.44);
    --dot-overflow-bg: #8E8E93;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
    font-family: var(--font-family);
    outline: none;
}

body {
    background-color: var(--bg-color);
    background-image: var(--page-side-glow), var(--page-gradient);
    color: var(--text-primary);
    transition: background-color var(--motion-duration-slow) var(--motion-ease-exit), background-image var(--motion-duration-slow) var(--motion-ease-exit), color var(--motion-duration-base) var(--motion-ease-exit);
    display: flex;
    justify-content: center;
    min-height: 100vh;
    padding: calc(env(safe-area-inset-top, 0px) + 20px) calc(env(safe-area-inset-right, 0px) + 16px) calc(env(safe-area-inset-bottom, 0px) + 24px) calc(env(safe-area-inset-left, 0px) + 16px);
    font-size: var(--base-font-size);
    line-height: 1.5;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body:has(.modal-overlay.active),
body:has(.settings-overlay.active),
body:has(.schedule-overlay.active),
body:has(.profiles-overlay.active),
body:has(.profile-edit-overlay.active),
body:has(.profile-color-modal.active) {
    overflow: hidden;
}

button,
.day,
.btn-icon,
.settings-btn,
.today-btn,
.profile-action-btn,
.schedule-btn,
.period-btn,
.theme-mode-btn,
.modal-close,
.modal-status-action {
    touch-action: manipulation;
}

h1,
.settings-title,
.schedule-title,
.panel-title,
.profile-edit-title,
.app-update-banner-title {
    font-family: var(--font-family-display);
    font-weight: 800;
}

.subtitle,
.settings-label,
.schedule-onboarding-kicker {
    letter-spacing: var(--type-label-sm-track);
    text-transform: none;
}

body.is-visual-switching *,
body.is-visual-switching *::before,
body.is-visual-switching *::after {
    transition: none !important;
    animation: none !important;
}

/* Текстура шуму для преміального вигляду */
body::before,
body::after {
    display: none;
}

:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring-strong);
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.icon-glyph {
    width: 1em;
    height: 1em;
    display: block;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: var(--icon-stroke-width);
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --panel-hover-transform: none;
        --icon-hover-transform: none;
        --button-hover-transform: none;
        --calendar-day-hover-transform: none;
        --panel-transition: none;
        --control-transition: none;
        --overlay-fade-transition: none;
        --modal-card-transition: none;
        --panel-enter-animation: none;
        --calendar-enter-animation: none;
        --swipe-transition: none;
        --swipe-out-left-animation: none;
        --swipe-out-right-animation: none;
    }
}