@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700;800&display=swap');

/* ShiftSeat design tokens. Brand values remain authoritative in the project
   design guidance; compatibility aliases keep the legacy sheet coherent
   while feature styles move into scoped files. */
:root {
    --ss-bg: #0f0f0f;
    --ss-bg-deep: #090909;
    --ss-surface: #171717;
    --ss-surface-2: #1d1d1d;
    --ss-surface-3: #242424;
    --ss-border: #303030;
    --ss-border-strong: #414141;
    --ss-text: #f8fafc;
    --ss-text-soft: #d6dbe2;
    --ss-text-muted: #9ca3af;
    --ss-primary: #e87722;
    --ss-primary-hover: #f28b3b;
    --ss-primary-dark: #b95512;
    --ss-primary-soft: rgba(232, 119, 34, .16);
    --ss-success: #2fbf71;
    --ss-success-soft: rgba(47, 191, 113, .14);
    --ss-success-border: rgba(47, 191, 113, .45);
    --ss-success-text: #baf7d4;
    --ss-danger: #ef4444;
    --ss-danger-soft: rgba(239, 68, 68, .13);
    --ss-danger-border: rgba(239, 68, 68, .45);
    --ss-danger-text: #fecaca;
    --ss-warning: #f59e0b;
    --ss-warning-soft: rgba(245, 158, 11, .14);
    --ss-warning-border: rgba(245, 158, 11, .45);
    --ss-warning-text: #ffd28a;
    --ss-info: #60a5fa;
    --ss-info-soft: rgba(96, 165, 250, .12);
    --ss-info-border: rgba(96, 165, 250, .45);
    --ss-info-text: #bfdbfe;
    --ss-brand-border: rgba(232, 119, 34, .45);
    --ss-brand-text: #ffb46f;

    --ss-font: 'Inter Tight', Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --ss-font-size-page-title: clamp(1.8rem, 4vw, 2.8rem);
    --ss-font-size-section: 1.05rem;
    --ss-font-size-body: .94rem;
    --ss-font-size-helper: .82rem;
    --ss-font-size-metric: 1.8rem;
    --ss-line-tight: 1.1;
    --ss-line-body: 1.5;

    --ss-space-1: .25rem;
    --ss-space-2: .5rem;
    --ss-space-3: .75rem;
    --ss-space-4: 1rem;
    --ss-space-5: 1.25rem;
    --ss-space-6: 1.5rem;
    --ss-space-8: 2rem;

    --ss-radius-sm: 6px;
    --ss-radius: 8px;
    --ss-radius-lg: 10px;
    --ss-radius-pill: 999px;
    --ss-sidebar-width: 284px;
    --ss-header-height: 74px;
    --ss-page-max: 1180px;
    --ss-shadow: 0 20px 50px rgba(0, 0, 0, .38);
    --ss-shadow-raised: 0 14px 34px rgba(0, 0, 0, .28);
    --ss-focus-ring: 0 0 0 3px rgba(232, 119, 34, .28);
    --ss-primary-border: rgba(232, 119, 34, .58);
    --ss-primary-shadow: 0 0 0 3px rgba(232, 119, 34, .12);
    --ss-surface-subtle: rgba(255, 255, 255, .06);
    --ss-surface-gradient: linear-gradient(180deg, rgba(31, 31, 31, .98), rgba(18, 18, 18, .98));
    --ss-transition: 150ms ease;

    /* Transitional aliases for existing ShiftSeat and Metronic-inspired CSS. */
    --ss-orange: var(--ss-primary);
    --ss-radius-md: var(--ss-radius);
    --ss-surface-raised: var(--ss-surface-2);
    --kt-border: var(--ss-border);
    --kt-border-color: var(--ss-border);
    --kt-card-background: var(--ss-surface-2);
    --kt-text-muted: var(--ss-text-muted);
    --kt-text-strong: var(--ss-text);
    --shiftseat-accent: var(--ss-primary);
    --shiftseat-border: var(--ss-border);
    --shiftseat-border-strong: var(--ss-border-strong);
    --shiftseat-muted: var(--ss-text-muted);
    --shiftseat-surface-soft: var(--ss-surface-2);
    --shiftseat-text: var(--ss-text);

    font-family: var(--ss-font);
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --ss-transition: 0ms;
    }
}