/* ==============================================
   VORRAT — Design System (vorrat-base.css)
   Shared between Landing Page and App
   ============================================== */

/* --- Tokens --- */
:root {
  /* Greens — BMEL/ZGFDT palette */
  --v-green-900: #0a2e1a;
  --v-green-800: #113d24;
  --v-green-700: #17512f;
  --v-green-600: #1a5c39;
  --v-green-500: #22733f;
  --v-green-400: #3a9960;
  --v-green-300: #6bbd8e;
  --v-green-200: #a8d8ba;
  --v-green-100: #d4eede;
  --v-green-50:  #e8f5ee;
  --v-green-25:  #f3faf6;

  /* Oranges */
  --v-orange-600: #d17520;
  --v-orange-500: #f28c28;
  --v-orange-400: #f5a24e;
  --v-orange-300: #f8bf7e;
  --v-orange-200: #fbd9ad;
  --v-orange-100: #fdecd6;
  --v-orange-50:  #fef6ec;

  /* Status */
  --v-red-500: #dc3545;
  --v-red-100: #fce8ea;
  --v-yellow-500: #e6a817;

  /* Neutrals */
  --v-gray-900: #1a1a1a;
  --v-gray-700: #4a4a4a;
  --v-gray-600: #666666;
  --v-gray-500: #888888;
  --v-gray-400: #aaaaaa;
  --v-gray-300: #cccccc;
  --v-gray-200: #e2e2e2;
  --v-gray-100: #f0f0f0;
  --v-gray-50:  #f8f8f8;
  --v-white:    #ffffff;

  /* Infographic BG */
  --v-bg-info: #e8eceb;

  /* Shadows */
  --v-shadow-xs: 0 1px 2px rgba(0,0,0,.04);
  --v-shadow-sm: 0 1px 4px rgba(0,0,0,.06);
  --v-shadow-md: 0 4px 16px rgba(0,0,0,.07);
  --v-shadow-lg: 0 8px 32px rgba(0,0,0,.09);

  /* Radii */
  --v-r-xs: 6px;
  --v-r-sm: 8px;
  --v-r-md: 14px;
  --v-r-lg: 22px;
  --v-r-xl: 32px;
  --v-r-full: 9999px;

  /* Typography */
  --v-font-display: 'Outfit', -apple-system, sans-serif;
  --v-font-body: 'DM Sans', -apple-system, sans-serif;

  /* Layout */
  --v-max-w: 1100px;
  --v-pad: 24px;
}

/* --- Reset (shared) --- */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--v-font-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--v-gray-700);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
ul, ol { list-style: none; }

/* --- Shared Components --- */
.v-container { max-width: var(--v-max-w); margin: 0 auto; padding: 0 var(--v-pad); }

.v-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 26px; border-radius: var(--v-r-full);
  font-weight: 600; font-size: .95rem;
  transition: all .25s ease;
  white-space: nowrap;
}
.v-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.v-btn-primary { background: var(--v-green-600); color: var(--v-white); }
.v-btn-primary:hover { background: var(--v-green-500); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(26,92,57,.25); }
.v-btn-secondary { background: var(--v-white); color: var(--v-green-700); border: 2px solid var(--v-green-200); }
.v-btn-secondary:hover { border-color: var(--v-green-400); background: var(--v-green-25); }
.v-btn-orange { background: var(--v-orange-500); color: var(--v-white); }
.v-btn-orange:hover { background: var(--v-orange-600); transform: translateY(-1px); }

/* Card base */
.v-card {
  background: var(--v-white);
  border-radius: var(--v-r-md);
  padding: 24px;
  box-shadow: var(--v-shadow-sm);
  transition: box-shadow .25s, transform .25s;
}
.v-card:hover { box-shadow: var(--v-shadow-md); }

/* Status dots */
.v-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.v-dot-green { background: var(--v-green-400); }
.v-dot-orange { background: var(--v-orange-500); }
.v-dot-red { background: var(--v-red-500); }

/* Orange percent circle (infographic style) */
.v-percent-circle {
  width: 52px; height: 52px;
  background: var(--v-orange-500);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--v-white);
  font-family: var(--v-font-display);
  font-weight: 700; font-size: 1rem;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(242,140,40,.3);
}

/* Info bar (infographic style) */
.v-bar {
  height: 38px;
  background: var(--v-green-600);
  border-radius: 0 6px 6px 0;
  transition: width 1.2s cubic-bezier(.22,1,.36,1);
}

/* Screen reader only */
.v-sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); border: 0;
}