/* PROMEMIO UI v3 tokens. Single source of design values for the new UI generation. */
:root {
    color-scheme: light;

    --color-bg: #FBFCFD;
    --color-sidebar: #F3F5F7;
    --color-subtle: #F6F8FA;
    --color-surface: #FFFFFF;
    --color-popover: #FFFFFF;
    --color-text: #1D1D1F;
    --color-text-muted: #66717C;
    --color-text-muted-strong: #56606A;
    --color-text-disabled: #8B96A1;
    --color-line: #DDE2E7;
    --color-line-strong: #C2CBD4;
    --color-line-control: #84909B;
    --color-hover: rgba(12, 68, 124, .04);
    --color-selected: rgba(12, 68, 124, .07);
    --color-accent: #0C447C;
    --color-accent-hover: #0A3866;
    --color-accent-pressed: #072D55;
    --color-on-accent: #FFFFFF;
    --color-on-project: #FFFFFF;
    --color-accent-bg: #E8EFF7;
    --color-danger: #B42318;
    --color-danger-bg: #FFF1F0;
    --color-success: #18794E;
    --color-success-bg: #EAF7F0;
    --color-overlay: rgba(13, 20, 28, .42);

    --color-project-harbor: #2F6FB0;
    --color-project-pine: #2E7D68;
    --color-project-mulberry: #A64D6D;
    --color-project-violet: #6B63A8;
    --color-project-terracotta: #A45A45;
    --color-project-graphite: #6E7781;

    --shadow-card: 0 .25rem 1rem rgba(20, 38, 60, .035);
    --shadow-popover: 0 1.5rem 4.375rem rgba(12, 24, 36, .24);
    --shadow-segmented: 0 1px 3px rgba(20, 38, 60, .12);
    --shadow-switch-thumb: 0 1px 3px rgba(0, 0, 0, .16);

    --space-1: .25rem;
    --space-2: .5rem;
    --space-3: .75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;

    --text-xs: .75rem;
    --text-sm: .8125rem;
    --text-base: .875rem;
    --text-md: 1.0625rem;
    --text-lg: 1.25rem;
    --text-xl: 1.875rem;
    --panel-title-font: 1.125rem;

    --weight-body: 430;
    --weight-medium: 500;
    --weight-strong: 600;

    --radius-control: 9px;
    --radius-icon: 8px;
    --radius-card: 12px;
    --radius-note: 2px;
    --radius-panel: 14px;
    --radius-dialog: 16px;
    --radius-tag: 7px;
    --radius-check: 5px;
    --radius-danger-row: 8px;
    --radius-timer-input: 10px;
    --radius-segmented: 7px;
    --radius-small: 6px;
    --radius-pill: 999px;

    --line-height-base: 1.45;
    --line-height-title: 1.12;
    --line-height-title-md: 1.25;

    --tracking-title: -.028em;
    --tracking-title-md: -.01em;

    --control-height: 2.5rem;
    --control-height-compact: 2rem;
    --row-height: 3.5rem;
    --icon-size: 1.0625rem;
    --icon-size-small: 1rem;
    --icon-size-large: 1.125rem;
    --icon-size-check: .8125rem;

    --header-gap: 1.25rem;
    --header-margin: 1.375rem;
    --button-pad: .875rem;
    --panel-pad: 1.125rem;
    --panel-pad-compact: .9375rem;
    --panel-head-margin: .875rem;
    --row-meta-indent: 1.875rem;
    --module-gap: 1.125rem;
    --split-gap: 1.125rem;
    --section-label-margin-top: 1.375rem;
    --row-gap: 1rem;
    --row-pad-block: .625rem;
    --row-pad-inline: .875rem;
    --timer-pad: 1.125rem;
    --timer-gap: 1.125rem;
    --timer-input-pad: .875rem;
    --timer-input-gap: .625rem;
    --timer-input-font: 1rem;
    --timer-input-min-height: 3.125rem;
    --timer-time-gap: .875rem;
    --timer-time-min: 12.125rem;
    --timer-elapsed-font: 1.75rem;
    --timer-chip-height: 2.25rem;
    --timer-chip-gap: .5625rem;
    --event-time-width: 6.125rem;
    --event-min-height: 3rem;
    --event-pad-inline: .375rem;
    --event-current-pad: .625rem;

    --toolbar-pad-block: .6875rem;
    --toolbar-pad-inline: .75rem;
    --toolbar-margin-bottom: 1.25rem;
    --field-gap: .5625rem;
    --field-min-width: 8.25rem;
    --field-search-min: 16.25rem;
    --field-search-max: 28rem;
    --field-mobile-basis: 9.0625rem;
    --segmented-pad: .1875rem;
    --segmented-option-pad: .625rem;
    --tag-height: 1.5rem;
    --dot-size: .4375rem;
    --check-size: 1.125rem;
    --switch-width: 2.625rem;
    --switch-height: 1.5rem;
    --switch-pad: .125rem;
    --switch-thumb: 1.25rem;
    --switch-offset: 1.125rem;
    --play-size: 2.875rem;
    --menu-min-width: 11rem;
    --dialog-width: 30rem;
    --dialog-width-wide: 53.75rem;
    --dialog-width-search: 40rem;
    --search-dialog-top: 5rem;
    --search-results-min-height: 18rem;
    --dialog-max-height: 51rem;
    --dialog-head-pad: 1.375rem 1.5rem 1.125rem;
    --dialog-body-pad: 1.25rem 1.5rem 1.5rem;
    --dialog-foot-pad: 1rem 1.5rem;
    --dialog-sheet-head-pad: 1.125rem 1.125rem .875rem;
    --dialog-sheet-body-pad: 1rem 1.125rem 1.25rem;
    --dialog-sheet-foot-pad: .875rem 1.125rem;
    --page-name-row-pad: .875rem;
    --page-name-row-margin-bottom: 1.25rem;
    --page-name-row-gap: .625rem;
    --row-gap-compact: .4375rem;
    --module-row-height: 4rem;
    --module-row-columns: 1.5rem minmax(14.375rem, 1fr) 6rem 8.875rem 4.75rem;
    --module-row-columns-sheet: 1.25rem minmax(0, 1fr) auto;
    --module-row-gap: .625rem;
    --module-row-gap-sheet: .5625rem;
    --module-row-pad: .5rem .75rem;
    --module-row-pad-sheet: .6875rem .75rem;
    --topbar-avatar-size: 2rem;
    --reorder-status-min-height: 1.25rem;

    --notes-projects-width: 14rem;
    --notes-list-width: 20rem;
    --notes-list-min: 15rem;
    --notes-row-height: 4rem;
    --notes-thumb-size: 2.5rem;
    --notes-image-max-height: 24rem;
    --notes-workspace-height: 44rem;
    --notes-workspace-min-height: 20rem;
    --notes-toolbar-select-max: 5.5rem;
    --notes-link-popover-width: 20rem;

    --calendar-hour-height: 5rem;
    --calendar-week-day-min: 6.25rem;
    --calendar-overlap-min: 13rem;
    --calendar-cascade-offset: .75rem;
    --calendar-time-gutter: 3.625rem;
    --calendar-month-cell-min: 7.875rem;
    --calendar-plan-tint: 12%;
    --calendar-plan-rule: 3px;
    --calendar-tracked-tint: 6%;
    --calendar-tracked-hatch-share: 10%;
    --calendar-tracked-hatch-running-share: 18%;
    --calendar-tracked-symbol: 1rem;
    --calendar-tracked-symbol-radius: 2px;
    --calendar-tracked-pop-width: 15rem;
    --calendar-popover-width: 20rem;
    --calendar-dialog-width: 35rem;
    --calendar-surface-height: 45rem;
    --calendar-surface-min-height: 15rem;

    --sidebar-pad-block-start: 1.375rem;
    --sidebar-pad-inline: .875rem;
    --sidebar-pad-block-end: 1rem;
    --sidebar-rail-width: 4.875rem;
    --sidebar-rail-pad-inline: .625rem;
    --drawer-width: 18.75rem;
    --topbar-pad-inline: 1.75rem;
    --topbar-gap: 1.25rem;
    --brand-gap: .625rem;
    --brand-margin: 0 .625rem 1.5rem;
    --brand-logo-width: 8.5rem;
    --brand-mark-size: 1.75rem;
    --account-avatar-size: 1.875rem;
    --picker-margin-bottom: 1.375rem;
    --nav-gap: .1875rem;
    --nav-item-gap: .625rem;
    --nav-icon-column: 1.375rem;
    --account-pad: .875rem .625rem 0;

    --sidebar-width: 14.75rem;
    --topbar-height: 3.75rem;
    --content-max-width: 90rem;
    --task-lane-max: 24rem;
    --list-col-project: 12rem;
    --list-col-date: 7rem;
    --list-col-activity: 10rem;
    --list-col-task: 11rem;
    --list-col-clock: 9rem;
    --list-col-duration: 4.5rem;
    --list-col-actions: 5rem;
    --list-col-actions-single: 2.75rem;
    --report-chart-height: 10rem;
    --report-bar-gap: .25rem;
    --report-bar-max: 2.5rem;
    --report-metric-font: 1.625rem;
    --report-name-col: 12rem;
    --report-percent-col: 3rem;
    --report-track-height: .3125rem;
    --report-project-dot: .75rem;
    --report-name-field: 24rem;
    --settings-nav-width: 12rem;
    --settings-pane-max: 45rem;
    --settings-control-width: 15rem;
    --settings-control-width-wide: 24rem;
    --settings-handle-width: 1.5rem;
    --settings-swatch-size: 1.5rem;
    --content-pad-top: 1.875rem;
    --content-pad-inline-min: 1.5rem;
    --content-pad-inline-max: 2.75rem;
    --content-pad-bottom: 3.5rem;
}

:root[data-theme="light"] {
    color-scheme: light;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --color-bg: #101316;
        --color-sidebar: #171B20;
        --color-subtle: #232A31;
        --color-surface: #1C2228;
        --color-popover: #232A31;
        --color-text: #F2F4F7;
        --color-text-muted: #A9B2BB;
        --color-text-muted-strong: #BCC4CC;
        --color-text-disabled: #7D8791;
        --color-line: #343B42;
        --color-line-strong: #64717E;
        --color-line-control: #6B7885;
        --color-hover: rgba(127, 176, 230, .06);
        --color-selected: rgba(127, 176, 230, .11);
        --color-accent: #7FB0E6;
        --color-accent-hover: #99C1EC;
        --color-accent-pressed: #B0D0F0;
        --color-on-accent: #0C1A2B;
        --color-on-project: #0C1A2B;
        --color-accent-bg: #1E2A38;
        --color-danger: #FFB4AB;
        --color-danger-bg: #3D2423;
        --color-success: #7FD8AC;
        --color-success-bg: #183529;
        --color-project-harbor: #79AEE0;
        --color-project-pine: #74C4AA;
        --color-project-mulberry: #D78CA7;
        --color-project-violet: #AAA1DF;
        --color-project-terracotta: #D99A86;
        --color-project-graphite: #A9B2BB;
        --shadow-card: none;
        --shadow-popover: 0 1.5rem 4.375rem rgba(0, 0, 0, .42);
    }
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --color-bg: #101316;
    --color-sidebar: #171B20;
    --color-subtle: #232A31;
    --color-surface: #1C2228;
    --color-popover: #232A31;
    --color-text: #F2F4F7;
    --color-text-muted: #A9B2BB;
    --color-text-muted-strong: #BCC4CC;
    --color-text-disabled: #7D8791;
    --color-line: #343B42;
    --color-line-strong: #64717E;
    --color-line-control: #6B7885;
    --color-hover: rgba(127, 176, 230, .06);
    --color-selected: rgba(127, 176, 230, .11);
    --color-accent: #7FB0E6;
    --color-accent-hover: #99C1EC;
    --color-accent-pressed: #B0D0F0;
    --color-on-accent: #0C1A2B;
    --color-on-project: #0C1A2B;
    --color-accent-bg: #1E2A38;
    --color-danger: #FFB4AB;
    --color-danger-bg: #3D2423;
    --color-success: #7FD8AC;
    --color-success-bg: #183529;
    --color-project-harbor: #79AEE0;
    --color-project-pine: #74C4AA;
    --color-project-mulberry: #D78CA7;
    --color-project-violet: #AAA1DF;
    --color-project-terracotta: #D99A86;
    --color-project-graphite: #A9B2BB;
    --shadow-card: none;
    --shadow-popover: 0 1.5rem 4.375rem rgba(0, 0, 0, .42);
}

@media (max-width: 47.999em) {
    :root {
        --control-height: 2.75rem;
        --row-height: 3.75rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    :root:not([data-motion="full"]) * {
        transition: none !important;
    }
}

:root[data-motion="reduce"] * {
    transition: none !important;
}

:root[data-contrast="high"] {
    --color-text-muted: var(--color-text);
    --color-text-muted-strong: var(--color-text);
    --color-line: var(--color-line-control);
}

:root[data-contrast="high"][data-theme="dark"] {
    --color-text-muted: var(--color-text);
    --color-text-muted-strong: var(--color-text);
    --color-line: var(--color-line-control);
}

@media (prefers-color-scheme: dark) {
    :root[data-contrast="high"]:not([data-theme="light"]) {
        --color-text-muted: var(--color-text);
        --color-text-muted-strong: var(--color-text);
        --color-line: var(--color-line-control);
    }
}