:root {
  --font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-md: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 24px;
  --font-size-2xl: 32px;
  --font-size-body: var(--font-size-sm);

  --line-height-xs: 16px;
  --line-height-sm: 20px;
  --line-height-md: 24px;
  --line-height-lg: 28px;
  --line-height-xl: 32px;
  --line-height-2xl: 40px;
  --line-height-body: var(--line-height-sm);

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

  --color-accent: #FF631F;
  --color-accent-strong: #C2410C;
  --color-accent-strong-hover: #9A3412;
  --color-text-on-accent: #FFFFFF;
  --color-sidebar: #32223C;
  --color-sidebar-text: #FFFFFF;
  --color-sidebar-text-muted: #BDB7C7;
  --color-sidebar-hover: rgba(255, 255, 255, 0.08);
  --color-sidebar-active-border: var(--color-accent);

  --color-page: #F7F8FA;
  --color-card: #FFFFFF;
  --color-border: #E6E8EC;
  --color-border-strong: #6B7280;
  --color-border-strong-hover: #4B5563;
  --color-border-strong-active: #374151;
  --color-divider: #ECECEC;

  --color-text-primary: #32223C;
  --color-text-secondary: #4B5563;
  --color-text-muted: #6B7280;
  --color-text-disabled: #9CA3AF;
  --color-surface-disabled: #F3F4F6;
  --color-border-disabled: #D1D5DB;

  --color-success: #22C55E;
  --color-warning: #F59E0B;
  --color-danger: #EF4444;
  --color-info: #3B82F6;

  --color-success-bg-subtle: #ECFDF3;
  --color-success-fg: #166534;
  --color-warning-bg-subtle: #FFFBEB;
  --color-warning-fg: #92400E;
  --color-danger-bg-subtle: #FEF2F2;
  --color-danger-fg: #991B1B;
  --color-info-bg-subtle: #EFF6FF;
  --color-info-fg: #1E40AF;

  --chart-series-1: #FF631F;
  --chart-series-2: #32223C;
  --chart-series-3: #2563EB;
  --chart-series-4: #047857;
  --chart-series-5: #D97706;
  --chart-series-6: #64748B;

  --table-row-hover: #F9FAFB;
  --table-row-selected: #E5E7EB;
  --table-header-bg: #F7F8FA;
  --table-header-text: var(--color-text-secondary);
  --table-header-border: var(--color-border);
  --table-sticky-shadow: 0 1px 0 var(--color-border);
  --table-row-height: 44px;
  --table-row-height-compact: 36px;
  --grid-cell-font-size: var(--font-size-sm);
  --grid-cell-line-height: var(--line-height-sm);

  --control-height-sm: 32px;
  --control-height: 40px;
  --control-padding-x: 12px;
  --control-gap: 8px;
  --control-border-width: 1px;
  --label-font-size: var(--font-size-xs);
  --label-line-height: var(--line-height-xs);
  --label-margin-bottom: 6px;
  --label-color: var(--color-text-secondary);
  --input-bg: var(--color-card);
  --input-border: var(--color-border-strong);
  --input-border-hover: var(--color-border-strong-hover);
  --input-border-focus: var(--color-accent-strong);
  --input-border-error: var(--color-danger-fg);
  --input-placeholder: var(--color-text-muted);
  --input-disabled-bg: var(--color-surface-disabled);
  --input-disabled-border: var(--color-border-disabled);
  --input-disabled-text: var(--color-text-disabled);
  --field-error-color: var(--color-danger-fg);
  --field-help-color: var(--color-text-muted);

  --button-height-sm: 32px;
  --button-height: 40px;
  --button-padding-x: 14px;
  --button-gap: 8px;
  --button-font-size: var(--font-size-sm);
  --button-font-weight: var(--font-weight-semibold);
  --button-primary-bg: var(--color-accent-strong);
  --button-primary-bg-hover: var(--color-accent-strong-hover);
  --button-primary-bg-active: var(--color-accent-strong-hover);
  --button-primary-fg: var(--color-text-on-accent);
  --button-primary-border: transparent;
  --button-secondary-bg: var(--color-card);
  --button-secondary-bg-hover: #F9FAFB;
  --button-secondary-bg-active: #F3F4F6;
  --button-secondary-fg: var(--color-text-primary);
  --button-secondary-border: var(--color-border-strong);
  --button-secondary-border-hover: var(--color-border-strong-hover);
  --button-secondary-border-active: var(--color-border-strong-active);
  --button-ghost-bg: transparent;
  --button-ghost-bg-hover: #F3F4F6;
  --button-ghost-bg-active: #E5E7EB;
  --button-ghost-fg: var(--color-text-secondary);
  --button-danger-bg: var(--color-danger-fg);
  --button-danger-bg-hover: #7F1D1D;
  --button-danger-bg-active: #7F1D1D;
  --button-danger-fg: #FFFFFF;
  --button-disabled-bg: var(--color-surface-disabled);
  --button-disabled-fg: var(--color-text-disabled);
  --button-disabled-border: var(--color-border-disabled);
  --button-pending-spinner: currentColor;

  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;

  --radius-button: 10px;
  --radius-input: 10px;
  --radius-card: 16px;
  --radius-modal: 20px;

  --shadow-card: 0 4px 16px rgba(0, 0, 0, 0.06);
  --shadow-modal: 0 10px 30px rgba(0, 0, 0, 0.10);

  --focus-ring: 0 0 0 2px var(--color-card), 0 0 0 4px var(--color-accent-strong);
  --focus-outline: 2px solid transparent;
  --focus-outline-offset: 2px;

  --z-base: 0;
  --z-grid-sticky: 100;
  --z-sidebar: 200;
  --z-topbar: 300;
  --z-dropdown: 500;
  --z-toast: 700;
  --z-modal-backdrop: 800;
  --z-modal: 900;
  --z-modal-popover: 1000;

  --motion-duration-fast: 120ms;
  --motion-duration-base: 180ms;
  --motion-duration-slow: 240ms;
  --motion-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --motion-ease-out: cubic-bezier(0, 0, 0.2, 1);

  --login-form-width: 420px;
}

@supports (color: color-mix(in srgb, black 50%, white)) {
  :root {
    --table-row-hover: color-mix(in srgb, var(--color-accent) 8%, white);
    --table-row-selected: color-mix(in srgb, var(--color-accent) 18%, white);
  }
}

:focus-visible {
  box-shadow: var(--focus-ring);
  outline: var(--focus-outline);
  outline-offset: var(--focus-outline-offset);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-duration-fast: 1ms;
    --motion-duration-base: 1ms;
    --motion-duration-slow: 1ms;
  }

  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
  }
}