:root {
  --primary: #f46a0a;
  --primary-hover: #d95700;
  --primary-active: #bc4b00;
  --primary-subtle: #fff2e8;
  --primary-muted: #ffe1cc;
  --primary-highlight: rgba(244, 106, 10, 0.09);
  --primary-highlight-strong: rgba(244, 106, 10, 0.18);
  --primary-focus-ring: rgba(244, 106, 10, 0.35);
  --primary-gradient: linear-gradient(90deg, #f46a0a 0%, #ff9a52 100%);

  --background: #f4f5f7;
  --surface: #ffffff;
  --surface-muted: #fafafa;
  --surface-active: #f4f4f4;
  --timeline-header: #f7f7f8;
  --timeline-weekend: #fafafa;
  --timeline-grid: #eceef1;
  --timeline-grid-soft: #f5f5f6;

  --border: #e3e5e8;
  --border-strong: #d4d7dc;

  --text: #111318;
  --text-muted: #667085;
  --text-subtle: #98a2b3;

  --success: #1f9d62;
  --warning: #d97706;
  --danger: #d92d20;
  --danger-highlight: rgba(217, 45, 32, 0.1);
  --danger-gradient: linear-gradient(90deg, #d92d20 0%, #f79009 100%);

  --nav-background: #ffffff;
  --nav-text: #2b2f36;
  --nav-muted: #747b86;
  --nav-hover: #f7f7f7;
  --nav-active: #fff4ec;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;

  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.04);
  --shadow-md: 0 8px 24px rgba(16, 24, 40, 0.08);
  --shadow-shell: 0 18px 50px rgba(16, 24, 40, 0.12);

  --nav-width: 230px;
  --header-height: 68px;
}

html,
body {
  width: 100%;
  height: 100%;
}

body {
  background:
    radial-gradient(
      circle at top left,
      rgba(255, 255, 255, 0.95),
      transparent 34%
    ),
    linear-gradient(135deg, #f7f7f8 0%, #eef0f3 100%);
  color: var(--text);
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

button,
input {
  color: inherit;
}

button {
  border: 0;
}

svg {
  display: block;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}