:root {
  --app-bg: #f1f1f1;
  --surface: #ffffff;
  --surface-soft: #f8f8f8;
  --text-main: #2f2f2f;
  --text-soft: #666666;
  --stroke: #dfdfdf;

  --primary: #ef3b2d;
  --primary-rgb: 239, 59, 45;
  --primary-soft: #ffe5e2;
  --primary-dark: #cf2318;
  --accent: #f47b20;
  --accent-rgb: 244, 123, 32;

  --shadow-soft: 0 12px 28px rgba(0, 0, 0, 0.1);
}

body {
  background:
    radial-gradient(circle at 10% -10%, rgba(var(--accent-rgb), 0.1) 0, rgba(var(--accent-rgb), 0) 40%),
    radial-gradient(circle at 95% -10%, rgba(var(--primary-rgb), 0.1) 0, rgba(var(--primary-rgb), 0) 35%),
    linear-gradient(180deg, #f8f8f8 0%, var(--app-bg) 100%);
}

.app-header {
  background: rgba(255, 255, 255, 0.95);
  border-bottom-color: #e2e2e2;
}

.app-footer {
  background: rgba(255, 255, 255, 0.97);
  border-top-color: #e2e2e2;
}

.brand-logo {
  border-radius: 8px;
  background: linear-gradient(145deg, var(--primary), var(--accent));
  box-shadow: 0 8px 18px rgba(var(--primary-rgb), 0.28);
}

.app-sidebar {
  background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
  border-right-color: #e2e2e2;
}

.app-nav-link:hover,
.app-nav-link.active {
  color: var(--primary-dark);
  background: var(--primary-soft);
  box-shadow: inset 3px 0 0 var(--primary);
}

.page-title {
  background: linear-gradient(90deg, #ffffff 0%, #fff4ef 100%);
  border-color: #f0d7cc;
  box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.12);
  color: var(--primary-dark);
}

.page-title::before {
  background: linear-gradient(145deg, var(--primary), var(--accent));
}

.card {
  border-color: #e2e2e2;
}

.card-highlight {
  background: #fff6f4;
  border-color: #ffd5cd;
}

.card-floating-title {
  background: linear-gradient(145deg, var(--primary), var(--accent));
  box-shadow: 0 8px 18px rgba(var(--primary-rgb), 0.28);
}

.card-floating-title-soft {
  background: #ffffff;
  border-color: #f0d7cc;
  color: var(--primary-dark);
}

.kpi-icon {
  background: linear-gradient(145deg, var(--primary), var(--accent));
  box-shadow: 0 8px 16px rgba(var(--primary-rgb), 0.25);
}

.kpi-icon-soft {
  background: #ffe9e5;
  color: var(--primary-dark);
}

.home-action-footer {
  background: linear-gradient(180deg, #fff7f4 0%, #ffefe9 100%);
  border-top-color: #f0d7cc;
}

.help-card {
  background: linear-gradient(120deg, #ffffff 0%, #fff6f2 100%);
}

.supply-code-pill {
  background: #ffe8e1;
  color: var(--primary-dark);
}

.supply-switch-btn.active {
  background: linear-gradient(140deg, var(--primary), var(--accent));
  box-shadow: 0 6px 14px rgba(var(--primary-rgb), 0.28);
}

.profile-btn {
  color: var(--primary-dark);
}

.mobile-nav-link.active {
  color: var(--primary);
}

.mobile-nav-link.active i {
  color: var(--primary);
  border-color: #ffd9d2;
  box-shadow: 0 8px 20px rgba(var(--primary-rgb), 0.28);
}