:root {
    --font-family-sans: Inter, "Segoe UI", Arial, sans-serif;

    --font-size-heading: 29px;
    --font-size-display: 56px;
    --font-size-section-heading: 31px;
    --font-size-card-heading: 20px;
    --font-size-body: 16px;
    --font-size-label: 15px;
    --font-size-caption: 14px;
    --font-size-button: 17px;

    --line-height-tight: 1.08;
    --line-height-heading: 1.2;
    --line-height-relaxed: 1.65;

    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-heading: 650;

    --color-page-background: #020817;
    --page-background:
        linear-gradient(122deg, #020916 0%, #03091a 55%, #080a2c 100%);
    --page-glow-primary:
        rgba(62, 36, 182, 0.34) 0,
        rgba(31, 20, 104, 0.2) 22%,
        transparent 48%;
    --page-glow-secondary:
        rgba(37, 36, 126, 0.15) 0,
        transparent 38%;
    --page-darken-primary: rgba(1, 8, 21, 0.44), transparent 45%;
    --page-darken-secondary: rgba(73, 39, 214, 0.2), transparent 34%;

    --color-text-primary: #fbfbff;
    --color-text-secondary: #b4b8c8;
    --color-text-placeholder: #9298ad;
    --color-text-control: #f7f7fb;
    --color-text-label: #f4f4f8;
    --color-validation-error-text: #ff8295;
    --color-validation-error-border: #e85d75;
    --color-danger-text: #ff8295;
    --color-danger-border: rgba(232, 93, 117, 0.72);
    --color-danger-surface: rgba(143, 31, 57, 0.18);
    --color-danger-surface-hover: rgba(173, 36, 67, 0.3);
    --color-warning-text: #ffd166;
    --color-warning-border: rgba(255, 209, 102, 0.72);
    --color-warning-surface: rgba(130, 89, 18, 0.2);
    --color-accent: #8b67ff;
    --color-accent-hover: #a58aff;
    --color-brand-mark:
        linear-gradient(145deg, #6c4cff 0%, #2f20ee 58%, #1515a7 100%);
    --color-provider-google-blue: #4285f4;
    --color-provider-google-green: #34a853;
    --color-provider-google-yellow: #fbbc05;
    --color-provider-google-red: #ea4335;

    --color-control-icon: #9098ae;
    --color-control-border: #2b3750;
    --color-control-surface: rgba(4, 13, 30, 0.47);
    --color-control-surface-strong: rgba(4, 13, 30, 0.52);
    --color-control-hover: rgba(101, 76, 255, 0.18);
    --color-control-selected: rgba(101, 76, 255, 0.42);

    --color-card-surface:
        linear-gradient(145deg, rgba(5, 14, 33, 0.88), rgba(5, 14, 34, 0.74));
    --color-card-border: rgba(111, 123, 165, 0.42);
    --color-card-border-accent: rgba(123, 86, 255, 0.95);
    --color-dialog-backdrop: rgba(1, 5, 14, 0.82);

    --color-plan-border: rgba(126, 69, 255, 0.78);
    --color-plan-icon-surface: rgba(67, 37, 166, 0.2);
    --color-progress-track: rgba(56, 67, 98, 0.48);
    --color-progress-fill:
        linear-gradient(90deg, #7548f4 0%, #8d5bff 100%);
    --color-status-active-text: #22dc83;
    --color-status-active-surface: rgba(0, 105, 70, 0.24);
    --color-status-active-border: rgba(0, 156, 99, 0.34);
    --color-status-draft-text: #a779ff;
    --color-status-draft-surface: rgba(74, 35, 160, 0.2);
    --color-status-draft-border: rgba(104, 62, 205, 0.34);
    --color-status-completed-text: #ced5ea;
    --color-status-completed-surface: rgba(27, 50, 101, 0.34);
    --color-status-completed-border: rgba(57, 83, 145, 0.38);
    --color-replay-table-surface:
        linear-gradient(145deg, rgba(8, 12, 35, 0.88), rgba(5, 12, 31, 0.82));
    --color-replay-table-border: rgba(63, 67, 112, 0.42);
    --color-replay-row-surface: rgba(8, 12, 35, 0.34);
    --color-replay-row-hover: rgba(36, 30, 82, 0.28);
    --color-replay-row-border: rgba(52, 58, 103, 0.5);
    --color-replay-play-border: rgba(106, 83, 191, 0.62);
    --color-replay-action-border: rgba(79, 62, 154, 0.58);

    --color-sidebar-surface: #020817;
    --color-sidebar-border: rgba(111, 123, 165, 0.28);
    --color-sidebar-hover: rgba(101, 76, 255, 0.1);
    --color-sidebar-selected:
        linear-gradient(90deg, rgba(62, 48, 181, 0.78), rgba(30, 30, 102, 0.76));
    --color-navigation-text: #d7d7d7;
    --color-navigation-icon: #ffffff;
    --color-navigation-border: rgba(255, 255, 255, 0.1);
    --color-navigation-toggle-surface: rgba(255, 255, 255, 0.1);
    --color-navigation-toggle-checked-surface: rgba(255, 255, 255, 0.5);
    --color-navigation-header-surface: rgba(0, 0, 0, 0.4);
    --color-navigation-selected-surface: rgba(255, 255, 255, 0.37);
    --color-navigation-hover-surface: rgba(255, 255, 255, 0.1);
    --sidebar-glow:
        rgba(44, 38, 143, 0.16) 0,
        transparent 42%;

    --color-layout-sidebar-surface:
        linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
    --color-layout-header-surface: #f7f7f7;
    --color-layout-header-border: #d6d5d5;
    --color-error-text: #111827;
    --color-error-surface: #fff3cd;

    --color-button-primary-surface:
        linear-gradient(104deg, #4030ee 0%, #5339f4 53%, #5136ef 100%);
    --color-button-primary-hover:
        linear-gradient(104deg, #4b3af7 0%, #6248ff 53%, #6045f8 100%);

    --border-width: 1px;
    --border-default: var(--border-width) solid;
    --focus-ring: 3px solid rgba(139, 103, 255, 0.45);

    --radius-control: 8px;
    --radius-field: 9px;
    --radius-popup: 10px;
    --radius-card: 19px;
    --radius-sidebar-item: 11px;

    --shadow-card:
        0 -13px 35px rgba(91, 48, 239, 0.13),
        20px 0 58px rgba(69, 36, 205, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.02);
    --shadow-button-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.12);
    --shadow-pagination-active: 0 0 14px rgba(111, 73, 255, 0.18);
    --shadow-popup: 0 18px 45px rgba(0, 0, 0, 0.38);
    --shadow-error: 0 -1px 3px rgba(0, 0, 0, 0.25);
}