:root {

    /* ===========================
       BACKGROUNDS
       =========================== */

    --bg-page: #111827;
    --bg-card: #1B2230;
    --bg-surface: #1D2433;
    --bg-elevated: #232936;
    --bg-input: #273242;

    /* ===========================
       BORDERS
       =========================== */

    --border: #2F3848;
    --border-hover: #39465A;
    --border-focus: #5B6678;
    --border-subtle: rgba(255, 255, 255, .08);
    --divider-strong: rgba(255, 255, 255, .15);
    --divider-soft: rgba(255, 255, 255, .06);
    --divider-medium: rgba(255, 255, 255, .09);

    /* ===========================
       TEXT
       =========================== */

    --text-primary: #FFFFFF;
    --text-secondary: #B7BCC8;
    --text-muted: #909AAA;
    --text-light: #EEF2F8;
    --text-bright: #F3F6FB;

    /* ===========================
   TYPOGRAPHY
   =========================== */

    /* Type scale */

    --font-display: 42px;
    --font-page-title: 38px;
    --font-workflow-title: 34px;
    --font-section-title: 30px;
    --font-content-title: 24px;
    --font-panel-title: 18px;
    --font-card-title: 16px;

    --font-body-lg: 15px;
    --font-body: 14px;
    --font-body-sm: 13px;
    --font-caption: 12px;

    --font-label: 11px;
    --font-meta: 11px;


    /* Weights */

    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;


    /* Line heights */

    --line-tight: 1.15;
    --line-title: 1.2;
    --line-body: 1.6;
    --line-body-relaxed: 1.7;
    --line-compact: 1.4;


    /* Tracking */

    --tracking-title: -.03em;
    --tracking-content-title: -.02em;
    --tracking-label: 1.8px;
    --tracking-subsection: 1.5px;

    /* ===========================
       BUTTONS
       =========================== */

    --button-height-lg: 52px;
    --button-height-md: 44px;
    --button-height-sm: 36px;

    --button-radius: 10px;
    --button-radius-lg: 12px;
    --button-radius-pill: 999px;

    --button-font-lg: 14px;
    --button-font-md: 12px;
    --button-font-sm: 11px;

    --button-padding-lg: 0 30px;
    --button-padding-md: 0 20px;
    --button-padding-sm: 0 14px;

    /* Form controls */

    --control-height-lg: 54px;
    --control-height-md: 44px;
    --control-height-sm: 36px;

    --control-radius-lg: 12px;
    --control-radius-md: 10px;
    --control-radius-sm: 8px;

    --control-padding-lg: 16px 18px;
    --control-padding-md: 13px 14px;
    --control-padding-sm: 9px 10px;

    --control-bg: #263142;
    --control-bg-hover: #2A3547;
    --control-bg-focus: #2D394B;
    --control-placeholder: #8994A6;

    --control-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .025),
        0 7px 18px rgba(0, 0, 0, .12);

    --control-shadow-hover:
        inset 0 1px 0 rgba(255, 255, 255, .04),
        0 9px 22px rgba(0, 0, 0, .16);

    --control-shadow-focus:
        inset 0 0 0 1px rgba(255, 255, 255, .075),
        inset 0 1px 0 rgba(255, 255, 255, .05),
        0 11px 26px rgba(0, 0, 0, .18);

    --control-focus-ring:
        0 0 0 3px rgba(255, 255, 255, .055);

    /* Pills and compact actions */

    --pill-height: 27px;
    --pill-padding: 0 10px;
    --pill-radius: 999px;
    --pill-gap: 8px;
    --pill-font-size: 11px;

    --icon-button-size-md: 34px;
    --icon-button-size-sm: 28px;
    --icon-button-size-xs: 18px;

    /* ===========================
       ACCENT
       =========================== */

    --accent: #4F8CFF;
    --accent-hover: #6BA1FF;
    --accent-strong: #3678F5;
    --accent-active: #1B4FCC;

    /* Restrained fills for compact actions carrying light text. */
    --action-primary-start: #5D83C4;
    --action-primary-end: #4B70AD;

    --accent-surface: rgba(79, 140, 255, .16);
    --accent-surface-subtle: rgba(79, 140, 255, .045);

    --accent-border-soft: rgba(79, 140, 255, .42);
    --accent-border-hover: rgba(79, 140, 255, .72);

    --accent-ring: rgba(79, 140, 255, .15);
    --accent-ring-light: rgba(79, 140, 255, .10);

    --accent-shadow: rgba(79, 140, 255, .16);
    --accent-shadow-strong: rgba(79, 140, 255, .22);
    --accent-surface-faint: rgba(79, 140, 255, .025);
    --accent-surface-hover: rgba(79, 140, 255, .06);
    --accent-surface-medium: rgba(79, 140, 255, .09);

    --accent-border-subtle: rgba(79, 140, 255, .26);
    --accent-border-strong: rgba(79, 140, 255, .78);

    /* Context pills */
    --priority-surface: rgba(87, 163, 255, .08);
    --priority-border: rgba(87, 163, 255, .25);

    /* Selected option navigation */
    --option-selected-surface: rgba(55, 104, 190, .10);
    --option-selected-surface-hover: rgba(55, 104, 190, .24);

    /* Problem callout */
    --problem-surface: rgba(87, 145, 255, .07);
    --problem-surface-fade: rgba(87, 145, 255, .018);
    --problem-border: rgba(87, 145, 255, .65);
    --problem-heading: rgba(132, 172, 245, .90);

    /* ===========================
       STATUS
       =========================== */

    --success: #48C78E;
    --success-surface-subtle: rgba(72, 199, 142, .025);
    --success-surface: rgba(72, 199, 142, .10);
    --success-border: rgba(72, 199, 142, .30);

    --warning: #F59E0B;

    --danger: #E16D6D;
    --danger-surface-subtle: rgba(225, 109, 109, .08);
    --danger-surface: rgba(225, 109, 109, .10);
    --danger-border-soft: rgba(225, 109, 109, .38);
    --danger-border: rgba(225, 109, 109, .42);

    --review: #8B7CFF;
    --review-surface: rgba(139, 124, 255, .12);
    --review-border: rgba(139, 124, 255, .28);

    /* Lifecycle identity — shared stage colors and prominent gradients. */
    --lifecycle-pending: var(--accent);
    --lifecycle-pending-header-start: var(--accent-hover);
    --lifecycle-pending-header-end: var(--accent-strong);

    --lifecycle-decided: var(--success);
    --lifecycle-decided-header-start: #67D5A4;
    --lifecycle-decided-header-end: #35AD76;

    --lifecycle-reviewed: var(--review);
    --lifecycle-reviewed-header-start: #A89CFF;
    --lifecycle-reviewed-header-end: #7163E6;

    --risk-surface: rgba(255, 107, 107, .10);
    --risk-border: rgba(255, 107, 107, .28);

    /* Deadline urgency */
    --deadline-approaching: #D7B86A;
    --deadline-approaching-surface: rgba(215, 184, 106, .07);
    --deadline-approaching-border: rgba(215, 184, 106, .28);

    --deadline-soon: #E4A85F;
    --deadline-soon-surface: rgba(228, 168, 95, .09);
    --deadline-soon-border: rgba(228, 168, 95, .35);

    --deadline-today: #EF9B62;
    --deadline-today-surface: rgba(239, 155, 98, .10);
    --deadline-today-border: rgba(239, 155, 98, .42);

    /* ===========================
       SHADOWS & OVERLAYS
       =========================== */

    --shadow-sm: 0 2px 6px rgba(0, 0, 0, .15);
    --shadow-md: 0 8px 20px rgba(0, 0, 0, .25);
    --shadow-button-hover: 0 5px 12px rgba(0, 0, 0, .20);

    --shadow-workspace:
        0 16px 36px rgba(0, 0, 0, .18),
        inset 0 1px 0 rgba(255, 255, 255, .025);

    --shadow-menu:
        0 12px 30px rgba(0, 0, 0, .22);

    --shadow-modal:
        0 24px 60px rgba(0, 0, 0, .34);

    --modal-overlay:
        rgba(0, 0, 0, .62);

    --surface-hover-subtle:
        rgba(255, 255, 255, .025);

    --surface-subtle: rgba(255, 255, 255, .05);

    --surface-hover:
        rgba(255, 255, 255, .035);

    --surface-sheen:
        rgba(255, 255, 255, .015);

    /* Neutral scrollbars used across modals, menus, and page regions. */
    --scrollbar-thumb: rgba(144, 154, 170, .42);
    --scrollbar-thumb-hover: rgba(183, 188, 200, .62);

}

html {
    scrollbar-gutter: stable;
}

/* ===========================
   SCROLLBARS
   =========================== */

* {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) transparent;
}

*::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    background-clip: padding-box;
    border: 2px solid transparent;
    border-radius: 999px;
}

*::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover);
    background-clip: padding-box;
}

*::-webkit-scrollbar-corner {
    background: transparent;
}

@property --option-gradient-start {

    syntax: "<color>";

    inherits: false;

    initial-value: transparent;

}

@property --option-gradient-mid {

    syntax: "<color>";

    inherits: false;

    initial-value: transparent;

}

@property --option-gradient-end {

    syntax: "<color>";

    inherits: false;

    initial-value: transparent;

}

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}

body {

    background: var(--bg-page);

    color: var(--text-primary);

    font-family: "Inter", sans-serif;

}

/* ===========================
   UTILITIES
   =========================== */

.hidden,
[hidden] {

    display: none !important;

}

.invisible {

    visibility: hidden;

    pointer-events: none;

}