/* Flat Rent Management – design tokens. Every colour, radius, shadow and font lives here; components only use the tokens.
   Brand colours come from branding.json via /brand.css (loaded after this file) – change the brand there, not here.
   Palette (mockup): dark green sidebar, green primary actions, petrol-blue secondary / back / info, warm light-green page background,
   white cards, amber for open / partial / pending, red only for late / rejected / terminated / destructive. Light first, dark tested
   (data-mode="dark"). Status is never colour only – chips always carry text, alerts an icon + text. */
:root {
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --fs-xs: 12px; --fs-sm: 13px; --fs: 14px; --fs-md: 15px; --fs-lg: 18px; --fs-xl: 23px; --fs-2xl: 30px;

  --brand: #2e7d5b; --brand-600: #276b4e; --brand-700: #1f5a41; --brand-400: #3f9a72;
  --brand-50: color-mix(in srgb, var(--brand) 9%, #fff); --brand-100: color-mix(in srgb, var(--brand) 18%, #fff);
  --accent: #b7791f; --accent-600: #975a16; --accent-50: color-mix(in srgb, var(--accent) 12%, #fff);
  --sidebar: #1f3a34; --sidebar-700: #172d28; --info-brand: #2f6f93; --page: #f3f6f4;
  --primary: var(--brand); --primary-hover: var(--brand-600); --primary-soft: var(--brand-50); --on-primary: #ffffff;
  --grad: linear-gradient(135deg, var(--brand) 0%, color-mix(in srgb, var(--brand) 55%, var(--sidebar)) 100%);
  /* shell: light top bar, dark green sidebar with the brand on top, green active item */
  --topbar-bg: var(--surface); --topbar-text: var(--text); --topbar-muted: var(--text-3); --topbar-hover: var(--surface-3);
  --side-bg: var(--sidebar); --side-text: #e3ece8; --side-muted: #9fb7ae; --side-hover: rgba(255, 255, 255, .07); --side-active-bg: var(--brand); --side-active-text: #ffffff;

  --bg: var(--page); --surface: #ffffff; --surface-2: #f7f9f8; --surface-3: #e8eeeb; --overlay: rgba(16, 32, 27, .45);
  --border: #dfe6e2; --border-strong: #c6d2cc; --focus: var(--brand-400);
  --text: #1f1e1d; --text-2: #3b4541; --text-3: #5f6b66; --text-inv: #ffffff;

  --success: #2e7d5b; --success-bg: #e3f2ea; --warning: #9a5b07; --warning-bg: #fdf1dc; --danger: #b3382c; --danger-bg: #fbe9e7; --info: #2f6f93; --info-bg: #e5f0f6; --neutral-bg: #edf1ef;
  /* status chips (spec 15.5): filled like the mockup – white text on the status colour */
  --st-draft: #2f6f93; --st-open: #b7791f; --st-done: #2e7d5b; --st-bad: #b3382c; --st-info: #2f6f93; --st-neutral: #6b7773; --st-text: #ffffff;
  /* buttons (spec 15.4): green create/save/finish, red delete, blue-purple PDF/preview, petrol back/secondary */
  --btn-create: #2e7d5b; --btn-create-hover: #276b4e; --btn-delete: #b3382c; --btn-delete-hover: #962e24; --btn-pdf: #4f5bb5; --btn-pdf-hover: #424c9c;
  --btn-back: #2f6f93; --btn-back-text: #ffffff; --btn-back-hover: #285f7e;
  /* chart series */
  --c-1: #2e7d5b; --c-2: #b7791f; --c-3: #2f6f93; --c-4: #8fb339; --c-5: #b3382c; --c-6: #7a5aa6; --c-other: #9aa8a2; --c-prev: #cfdad5;

  --radius-sm: 6px; --radius: 8px; --radius-lg: 10px; --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(20, 40, 33, .05); --shadow: 0 1px 3px rgba(20, 40, 33, .06), 0 8px 24px rgba(20, 40, 33, .06); --shadow-lg: 0 16px 48px rgba(20, 40, 33, .18);
  --sidebar-w: 236px; --sidebar-w-collapsed: 64px; --topbar-h: 56px; --gap: 16px; --input-h: 40px; --bottom-nav-h: 62px;
  color-scheme: light;
}
[data-mode="dark"] {
  --brand-50: color-mix(in srgb, var(--brand-400) 18%, #0d1714); --brand-100: color-mix(in srgb, var(--brand-400) 30%, #0d1714);
  --primary: #5cbf92; --primary-hover: #7ccfa8; --primary-soft: color-mix(in srgb, #5cbf92 18%, transparent); --on-primary: #06140f;
  --accent-50: color-mix(in srgb, var(--accent) 16%, transparent);
  --topbar-bg: #111c19; --topbar-text: #e3ece8; --topbar-muted: #9fb2aa; --topbar-hover: rgba(255, 255, 255, .07);
  --side-bg: #0f1f1b; --side-text: #d6e3dd; --side-muted: #8aa298; --side-hover: rgba(255, 255, 255, .06); --side-active-bg: #2b6e51; --side-active-text: #ffffff;
  --bg: #0b1412; --surface: #121e1b; --surface-2: #162521; --surface-3: #1d2f2a; --overlay: rgba(0, 0, 0, .6);
  --border: #24362f; --border-strong: #31473f; --focus: #6fd3a5;
  --text: #e6eeea; --text-2: #bccbc4; --text-3: #8fa39a;
  --success: #6fd3a5; --success-bg: rgba(111, 211, 165, .12); --warning: #f2c063; --warning-bg: rgba(242, 192, 99, .13); --danger: #f08b80; --danger-bg: rgba(240, 139, 128, .13); --info: #82bfe0; --info-bg: rgba(130, 191, 224, .13); --neutral-bg: #1d2f2a;
  --st-draft: #2d6d8f; --st-open: #9c6a17; --st-done: #2b7354; --st-bad: #a63a2f; --st-info: #2d6d8f; --st-neutral: #56645f; --st-text: #ffffff;
  --btn-create: #2f8762; --btn-create-hover: #3a9a72; --btn-delete: #b8463a; --btn-delete-hover: #c95447; --btn-pdf: #5b67c4; --btn-pdf-hover: #6a76d0;
  --btn-back: #2d6d8f; --btn-back-text: #ffffff; --btn-back-hover: #377ca0;
  --c-prev: #2c3f39;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4); --shadow: 0 1px 3px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .3); --shadow-lg: 0 16px 48px rgba(0, 0, 0, .55);
  color-scheme: dark;
}
[data-density="compact"] { --input-h: 36px; --gap: 12px; }