/* SikaKasa design tokens. Generated from tokens.json. Light theme is the default; dark values are provided for later use.
   @font-face lives in assets/css/fonts.css (Hanken Grotesk). --font-sans is defined there; --sk-font-sans aliases it. */
:root{
  --sk-surface: #F6F7F6;  /* App page background behind cards and tables. */
  --sk-surface-raised: #FFFFFF;  /* Cards, sidebar, topbar, menus, modals, table bodies. */
  --sk-surface-sunken: #EEF1EF;  /* Input wells, table header rows, segmented control track. */
  --sk-line: #E4E8E5;  /* Hairline borders on cards, tables, dividers. 1px only. */
  --sk-line-strong: #CDD4D0;  /* Input borders and control outlines (3:1 against surface-raised). */
  --sk-ink: #101A15;  /* Primary text and headings on surface and surface-raised. */
  --sk-ink-muted: #5B6660;  /* Secondary text, labels, table metadata. 5.9:1 on white. */
  --sk-ink-subtle: #6E7872;  /* Captions, timestamps, helper text. Not for body copy. */
  --sk-brand: #07803F;  /* Primary buttons, active nav, links. White text on it passes 5:1 (light); dark uses on-brand. */
  --sk-brand-hover: #066B35;  /* Hover and pressed state of brand fills. */
  --sk-brand-vivid: #0DB561;  /* The SikaKasa green from the existing theme. Charts, icons, logo, large display only; never body text on white. */
  --sk-brand-soft: #E8F6EE;  /* Tinted fills: active nav row, success badges, selected rows, icon tiles. */
  --sk-brand-ink: #067A3C;  /* Brand-colored text on surface or brand-soft. */
  --sk-on-brand: #FFFFFF;  /* Text and icons on a brand fill. */
  --sk-forest: #0B231A;  /* Deep marketing surface: landing hero, final CTA band, footer. */
  --sk-forest-raised: #123227;  /* Cards and mockup frames placed on forest. */
  --sk-on-forest: #F1F6F3;  /* Text on forest and forest-raised. */
  --sk-on-forest-muted: #A9BDB3;  /* Secondary text on forest. */
  --sk-gold: #E0B43A;  /* Sika gold. Premium, upgrade and highlight moments only, at large size or as a fill. One use per view. */
  --sk-gold-soft: #FBF3DC;  /* Upgrade card and premium badge background. */
  --sk-gold-ink: #7F5E07;  /* Text on gold-soft. */
  --sk-warning: #B54708;  /* Overdue soon, pending payment. Text on warning-soft. */
  --sk-warning-soft: #FEF0C7;  /* Warning badge background. */
  --sk-danger: #B42318;  /* Overdue invoices, destructive actions, errors. */
  --sk-danger-soft: #FEE4E2;  /* Danger badge and error field background. */
  --sk-info: #175CD3;  /* Draft, sent, informational notes. */
  --sk-info-soft: #E3EEFC;  /* Info badge background. */
  --sk-chart-income: #0DB561;  /* Income series in every chart. */
  --sk-chart-expense: #C2CCC7;  /* Expense series in every chart. Neutral so income leads. */
  --sk-space-1: 4px;
  --sk-space-2: 8px;
  --sk-space-3: 12px;
  --sk-space-4: 16px;
  --sk-space-5: 20px;
  --sk-space-6: 24px;
  --sk-space-8: 32px;
  --sk-space-10: 40px;
  --sk-space-16: 64px;
  --sk-space-24: 96px;
  --sk-radius-sm: 6px;
  --sk-radius-md: 10px;
  --sk-radius-lg: 14px;
  --sk-radius-xl: 20px;
  --sk-radius-pill: 999px;
  --sk-shadow-xs: 0 1px 2px rgba(16,26,21,0.05);
  --sk-shadow-sm: 0 1px 3px rgba(16,26,21,0.06), 0 1px 2px rgba(16,26,21,0.04);
  --sk-shadow-md: 0 12px 32px -8px rgba(16,26,21,0.14);
  --sk-focus-ring: 0 0 0 3px rgba(13,181,97,0.28);
  --sk-font-sans: var(--font-sans, 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif);
  --sk-text-display-xl: 700 56px/60px var(--sk-font-sans);  --sk-text-display-xl-tracking: -0.03em;
  --sk-text-display: 700 40px/46px var(--sk-font-sans);  --sk-text-display-tracking: -0.025em;
  --sk-text-h1: 700 26px/32px var(--sk-font-sans);  --sk-text-h1-tracking: -0.02em;
  --sk-text-h2: 650 18px/26px var(--sk-font-sans);  --sk-text-h2-tracking: -0.01em;
  --sk-text-h3: 600 15px/22px var(--sk-font-sans);
  --sk-text-body-lg: 400 17px/28px var(--sk-font-sans);
  --sk-text-body: 400 14px/22px var(--sk-font-sans);
  --sk-text-body-sm: 400 13px/20px var(--sk-font-sans);
  --sk-text-label: 600 12px/16px var(--sk-font-sans);  --sk-text-label-tracking: 0.02em;
  --sk-text-kpi: 700 28px/34px var(--sk-font-sans);  --sk-text-kpi-tracking: -0.02em;
  --sk-text-amount: 600 14px/22px var(--sk-font-sans);
}
[data-theme="dark"]{
  --sk-surface: #0E1512;
  --sk-surface-raised: #151D19;
  --sk-surface-sunken: #0A100D;
  --sk-line: #25302B;
  --sk-line-strong: #36433D;
  --sk-ink: #E9EEEB;
  --sk-ink-muted: #9AA6A0;
  --sk-ink-subtle: #7F8B85;
  --sk-brand: #34D27F;
  --sk-brand-hover: #5BE098;
  --sk-brand-vivid: #0DB561;
  --sk-brand-soft: #0F2E1F;
  --sk-brand-ink: #5BE098;
  --sk-on-brand: #06210F;
  --sk-forest: #07160F;
  --sk-forest-raised: #0E2219;
  --sk-on-forest: #F1F6F3;
  --sk-on-forest-muted: #A9BDB3;
  --sk-gold: #E0B43A;
  --sk-gold-soft: #2E250C;
  --sk-gold-ink: #E8C566;
  --sk-warning: #F7B27A;
  --sk-warning-soft: #3A2410;
  --sk-danger: #F97066;
  --sk-danger-soft: #3B1512;
  --sk-info: #84ADFF;
  --sk-info-soft: #102447;
  --sk-chart-income: #34D27F;
  --sk-chart-expense: #4A5852;
}