/* =========================================================================
   Vscore design tokens for app.vscore.at (Vscore Planning & modules)
   Source: Vscore design system, built from www.vscore.at styles.css.
   Everything is prefixed --vs- so it cannot clash with existing app CSS
   (Bootstrap etc.). No class selectors here except the font faces.
   Put the two woff2 files next to this file in /fonts/ (self-hosted, DSGVO).
   ========================================================================= */

@font-face { font-family: "Space Grotesk"; src: url("fonts/SpaceGrotesk-latin.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/Inter-latin.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }

:root {
  /* --- Grounds & text (never pure #fff / #000) --- */
  --vs-bg:         oklch(0.985 0.004 160);  /* ≈ #f8fbf9 page ground */
  --vs-bg-2:       oklch(0.967 0.007 178);  /* ≈ #eff6f4 panels, row hover, sum rows */
  --vs-bg-3:       oklch(0.945 0.011 188);  /* ≈ #e5efee dashboard canvas behind cards */
  --vs-ink:        oklch(0.265 0.030 205);  /* ≈ #12292c headings, body, totals */
  --vs-ink-2:      oklch(0.395 0.030 203);  /* ≈ #334b4d row labels, figures */
  --vs-muted:      oklch(0.530 0.022 200);  /* ≈ #5d7071 labels, captions (4.5:1+ on bg/bg-2) */
  --vs-line:       oklch(0.872 0.013 192);  /* ≈ #ccd8d7 borders, sum-row rules */
  --vs-line-soft:  oklch(0.918 0.009 190);  /* ≈ #dee6e5 table row dividers */

  /* --- Brand petrol (exact) --- */
  --vs-brand:      #075E65;  /* primary buttons, table header, active nav, KPI values */
  --vs-brand-600:  #064E53;  /* hover / pressed */
  --vs-brand-700:  #053E42;
  --vs-brand-800:  #042E31;  /* app top bar / sidebar */
  --vs-brand-900:  #031F21;
  --vs-shell-bg:   var(--vs-brand-600);  /* app top bar / sidebar / footer (owner 2026-10-10: brand-800 read too dark) */
  --vs-on-brand:        oklch(0.965 0.012 170);  /* text on brand fills (6.8:1) */
  --vs-on-brand-muted:  oklch(0.815 0.022 185);  /* secondary text on brand-800/900 */
  --vs-on-brand-line:   oklch(0.480 0.045 200);  /* borders on dark */

  /* --- The ONE accent: olive/lime of the V arrow --- */
  --vs-accent:      oklch(0.715 0.140 112);  /* ≈ #a6ab32 fills, focus ring, active underline. NOT as text on light */
  --vs-accent-ink:  oklch(0.470 0.105 112);  /* ≈ #5d6000 accent as text, positive deltas */
  --vs-accent-soft: oklch(0.930 0.045 115);  /* ≈ #e6ecca selected chip, highlight */
  --vs-on-accent:   oklch(0.24 0.04 120);    /* text on accent fills (6.6:1) — never white */
  --vs-card-head-bg: #868529; /* olive a touch deeper than prod's #AAA739 so white titles read 3.9:1 (AA large text: the titles are bold and large) */
  --vs-moved-ink:   oklch(0.48 0.15 300);  /* #368: figures moved to another position by a rule (violet) */

  /* --- Finance semantics --- */
  --vs-negative:    oklch(0.55 0.15 30);   /* ≈ #b94739 negative figures (always keep the minus sign) */
  --vs-warn:        oklch(0.62 0.15 40);   /* chart warning marks only */
  --vs-chart-neg:   oklch(0.78 0.03 200);
  --vs-chart-muted: oklch(0.66 0.045 200);

  /* --- Planning grid (derived) --- */
  --vs-cell-input-bg:   oklch(0.975 0.020 115);  /* editable driver cells: faint accent tint */
  --vs-cell-input-line: var(--vs-accent);        /* 2px bottom border on hover/focus of editable cell */
  --vs-cell-actual-bg:  var(--vs-bg-2);          /* Ist months */
  --vs-row-sum-bg:      var(--vs-bg-2);          /* DB, EBITDA, EBIT rows */
  --vs-focus-ring:      0 0 0 2.5px var(--vs-accent);

  /* --- Type --- */
  --vs-font-display: "Space Grotesk", "SF Pro Display", system-ui, -apple-system, "Segoe UI", sans-serif;
  --vs-font-body:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --vs-font-mono:    ui-monospace, "SF Mono", "IBM Plex Mono", Menlo, monospace;
  --vs-font-features: "tnum" 1, "ss01" 1, "cv05" 1;  /* tabular figures everywhere */
  --vs-fs-xs: 12.5px; --vs-fs-sm: 13.5px; --vs-fs-base: 14.5px; --vs-fs-md: 17px; --vs-fs-lg: 22px; --vs-fs-metric: 32px;

  /* --- Space / shape / depth --- */
  --vs-s-1: 4px; --vs-s-2: 8px; --vs-s-3: 12px; --vs-s-4: 16px; --vs-s-5: 24px; --vs-s-6: 32px; --vs-s-7: 48px;
  --vs-r-sm: 8px; --vs-r: 14px; --vs-r-lg: 22px; --vs-r-pill: 999px;
  --vs-shadow-sm: 0 1px 2px oklch(0.43 0.07 200 / 0.06), 0 2px 6px oklch(0.43 0.07 200 / 0.05);
  --vs-shadow-md: 0 6px 18px oklch(0.43 0.07 200 / 0.08), 0 2px 6px oklch(0.43 0.07 200 / 0.06);
  --vs-shadow-lg: 0 24px 60px oklch(0.30 0.06 202 / 0.16), 0 8px 22px oklch(0.30 0.06 202 / 0.10);
  --vs-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --vs-t-fast: 0.18s; --vs-t: 0.32s;
}