/* App-wide design tokens. Add semantic variables here before component CSS. */
:root {
    color-scheme: dark;

    --app-bg: #0d1119;
    --app-bg-elevated: #172033;
    --app-surface: #141a24;
    --app-surface-2: #1a2230;
    --app-surface-raised: var(--app-surface-2);
    --app-surface-muted: #101825;

    --app-border: #2a3446;
    --app-border-strong: #3a465d;
    --app-border-subtle: rgba(255, 255, 255, 0.08);

    --app-text: #e8edf7;
    --app-muted: #9aa8c0;
    --app-text-muted: var(--app-muted);
    --app-text-subtle: #7f8da5;
    --app-text-inverse: #0d1119;
    --app-white: #ffffff;

    --app-link: #8bb5ff;
    --app-link-hover: #b7cfff;
    --app-accent: #8bb5ff;
    --app-accent-hover: #b7cfff;
    --app-accent-soft: rgba(139, 181, 255, 0.15);
    --app-accent-softer: rgba(139, 181, 255, 0.08);
    --app-accent-selected: rgba(139, 181, 255, 0.2);
    --app-accent-border-soft: rgba(139, 181, 255, 0.22);
    --app-accent-border-strong: rgba(139, 181, 255, 0.55);
    --app-focus-ring: rgba(139, 181, 255, 0.28);

    --app-success: #42b883;
    --app-success-soft: rgba(66, 184, 131, 0.16);
    --app-warning: #f0c572;
    --app-warning-soft: rgba(240, 197, 114, 0.18);
    --app-danger: #f47777;
    --app-danger-soft: rgba(244, 119, 119, 0.16);
    --app-info: #75c7f0;
    --app-info-soft: rgba(117, 199, 240, 0.16);

    --app-panel-bg: var(--app-surface);
    --app-panel-border: var(--app-border);
    --app-menu-bg: var(--app-surface);
    --app-modal-bg: var(--app-surface);
    --app-body-radial-start: #172033;
    --app-header-bg: rgba(20, 26, 36, 0.9);
    --app-overlay-bg: rgba(20, 26, 36, 0.96);
    --app-input-bg: #0f1622;
    --app-input-placeholder: #7f8da5;
    --app-control-border: #64748a;
    --app-control-border-hover: #607692;
    --app-control-text: #c8d3e3;
    --app-control-text-inverse: #f5f8ff;
    --app-danger-text: #ffb1b1;
    --app-danger-strong: #ff8f8f;
    --app-danger-contrast: #ffe1e1;
    --app-danger-tint: rgba(244, 119, 119, 0.12);
    --app-danger-border: rgba(244, 119, 119, 0.45);
    --app-outline-danger-border: #c46473;
    --app-outline-danger-text: #f1a5b0;
    --app-outline-primary-border: #7ea6e6;
    --app-outline-primary-text: #a9c6f5;
    --app-white-alpha-015: rgba(255, 255, 255, 0.015);
    --app-white-alpha-02: rgba(255, 255, 255, 0.02);
    --app-white-alpha-03: rgba(255, 255, 255, 0.03);
    --app-white-alpha-05: rgba(255, 255, 255, 0.05);
    --app-white-alpha-06: rgba(255, 255, 255, 0.06);
    --app-white-alpha-08: rgba(255, 255, 255, 0.08);
    --app-white-alpha-42: rgba(255, 255, 255, 0.42);
    --app-slate-alpha-14: rgba(148, 163, 184, 0.14);
    --app-slate-alpha-18: rgba(148, 163, 184, 0.18);
    --app-slate-alpha-22: rgba(154, 168, 192, 0.22);
    --app-slate-alpha-45: rgba(148, 163, 184, 0.45);
    --app-slate-alpha-70: rgba(148, 163, 184, 0.7);
    --app-border-alpha-70: rgba(42, 52, 70, 0.7);
    --app-roster-border-weak: rgba(124, 146, 184, 0.14);
    --app-roster-border-mid: rgba(124, 146, 184, 0.24);
    --app-roster-border-strong: rgba(124, 146, 184, 0.72);
    --app-roster-header-bg: rgba(24, 31, 45, 0.96);
    --app-roster-sort-muted: rgba(124, 146, 184, 0.55);
    --app-row-border: rgba(32, 40, 57, 0.72);
    --app-shadow-sm-raw: rgba(0, 0, 0, 0.24);
    --app-shadow-md-raw: rgba(0, 0, 0, 0.25);
    --app-shadow-lg-raw: rgba(0, 0, 0, 0.28);
    --app-shadow-xl-raw: rgba(0, 0, 0, 0.32);
    --app-shadow-popover: rgba(0, 0, 0, 0.35);
    --app-overview-gradient-start: #202a3a;
    --app-overview-gradient-end: #161d2a;
    --app-overview-detail-bg: rgba(16, 24, 37, 0.92);
    --app-export-gradient-start: #1a2331;
    --app-success-border: rgba(66, 184, 131, 0.55);
    --app-success-action-border: rgba(73, 181, 126, 0.55);
    --app-success-action-start: #0e6944;
    --app-success-action-end: #0d593b;
    --app-success-action-hover-start: #12774e;
    --app-success-action-hover-end: #0f6342;
    --app-success-action-text: #eefcf5;
    --app-warning-border-strong: rgba(240, 197, 114, 0.75);
    --app-warning-border-soft: rgba(240, 199, 114, 0.45);
    --app-warning-tint: rgba(240, 197, 114, 0.14);
    --app-warning-mark: rgba(240, 199, 114, 0.4);
    --app-warning-conflict-bg: #524a34;
    --app-warning-conflict-text: #ffe7b2;
    --app-info-conflict-bg: #4b3b73;
    --app-info-conflict-text: #f1eaff;
    --app-info-export-glow: rgba(109, 151, 222, 0.16);
    --app-timesheet-card-start: rgba(44, 56, 77, 0.86);
    --app-timesheet-card-end: rgba(30, 39, 55, 0.96);
    --app-timesheet-text-strong: #f4f7fd;
    --app-timesheet-text: #f0f4fb;
    --app-timesheet-track-bg: rgba(10, 15, 24, 0.72);
    --app-timesheet-shift-start: #7fb4ff;
    --app-timesheet-shift-end: #5290df;
    --app-timesheet-shift-ring: rgba(27, 52, 87, 0.22);
    --app-timesheet-break-start: #f1d27d;
    --app-timesheet-break-end: #d3a84c;

    --app-radius-sm: 0.45rem;
    --app-radius-md: 0.65rem;
    --app-radius-lg: 0.9rem;
    --app-radius-pill: 999px;

    --app-shadow-sm: 0 0.35rem 0.9rem rgba(0, 0, 0, 0.18);
    --app-shadow-md: 0 0.7rem 1.7rem rgba(0, 0, 0, 0.25);
    --app-shadow-lg: 0 1rem 2.5rem rgba(0, 0, 0, 0.32);

    --app-space-1: 0.25rem;
    --app-space-2: 0.5rem;
    --app-space-3: 0.75rem;
    --app-space-4: 1rem;
    --app-space-5: 1.5rem;
    --app-control-height-sm: 2rem;
    --app-control-height-md: 2.5rem;
    --app-control-height-lg: 2.75rem;

    --roster-header: #2c3a4f;
    --roster-subhead: #243041;
    --roster-day-a: #202c3d;
    --roster-day-b: #111827;
    --roster-empty: #101825;
    --roster-danger: #5e1e23;
    --roster-row-height: 1.2rem;

    --text-xs: clamp(0.68rem, 0.66rem + 0.14vw, 0.8rem);
    --text-sm: clamp(0.8rem, 0.77rem + 0.18vw, 0.94rem);
    --text-base: clamp(0.92rem, 0.87rem + 0.24vw, 1.06rem);
    --text-lg: clamp(1.02rem, 0.95rem + 0.42vw, 1.3rem);
    --text-xl: clamp(1.56rem, 1.26rem + 0.96vw, 2.45rem);

    --roster-text-xs: clamp(0.58rem, 0.57rem + 0.11vw, 0.72rem);
    --roster-text-sm: clamp(0.66rem, 0.64rem + 0.14vw, 0.8rem);
    --roster-text-base: clamp(0.74rem, 0.71rem + 0.18vw, 0.9rem);
}