/* Razom Werkt brand tokens. Colours, type, radii; Pico variables are overridden at the bottom for cabinets. */
:root {
  --rz-ink: #0E2340;
  --rz-blue: #1A4D7C;
  --rz-blue-soft: #E4ECF4;
  --rz-accent: #C2410C;
  --rz-accent-hover: #9A3412;
  --rz-accent-mark: #EA6A1F;
  --rz-page: #F3F5F7;
  --rz-surface: #FFFFFF;
  --rz-line: #D8DEE5;
  --rz-text: #0E2340;
  --rz-muted: #4A5B70;
  --rz-ok: #1B7A45;
  --rz-ok-bg: #DCF1E4;
  --rz-warn: #8A5A00;
  --rz-warn-bg: #FBEBC8;
  --rz-bad: #B42318;
  --rz-bad-bg: #FADBD8;
  --rz-focus: #1A4D7C;
  --rz-radius: 12px;
  --rz-radius-sm: 8px;
  --rz-radius-lg: 16px;
  --rz-radius-xl: 20px;
  --rz-radius-pill: 999px;
  --rz-dark: #0E2340;
  --rz-accent-tint: #FBE7DC;
  --rz-accent-text: #7C2D12;
  --rz-text-2: #3C4653;
  --rz-shadow-hero: 0 18px 40px -18px rgba(14, 35, 64, .35);
  --rz-font-display: 'Unbounded', 'Manrope', system-ui, sans-serif;
  --rz-font: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --rz-max: 1120px;
  --rz-header-h: 64px;
}

[data-theme="dark"] {
  --rz-ink: #E8EEF6;
  --rz-blue: #7DB0E0;
  --rz-blue-soft: #16273F;
  --rz-page: #0A1424;
  --rz-surface: #101D32;
  --rz-line: #25364F;
  --rz-text: #E8EEF6;
  --rz-muted: #A6B6CA;
  --rz-ok: #5FD08A;
  --rz-ok-bg: #12301F;
  --rz-warn: #F0C060;
  --rz-warn-bg: #33270A;
  --rz-bad: #FF8A80;
  --rz-bad-bg: #3A1512;
  --rz-focus: #7DB0E0;
  --rz-shadow-hero: 0 18px 40px -18px rgba(0, 0, 0, .7);
  --rz-dark: #070D18;
  --rz-accent-tint: #3A2314;
  --rz-accent-text: #FBD5BF;
  --rz-text-2: #C9D4E2;
}

/* Pico (cabinets only) takes its look from the tokens above */
:root, [data-theme="dark"] {
  --pico-font-family: var(--rz-font);
  --pico-border-radius: var(--rz-radius-sm);
  --pico-background-color: var(--rz-page);
  --pico-color: var(--rz-text);
  --pico-muted-color: var(--rz-muted);
  --pico-muted-border-color: var(--rz-line);
  --pico-primary: var(--rz-blue);
  --pico-primary-background: var(--rz-accent);
  --pico-primary-border: var(--rz-accent);
  --pico-primary-hover-background: var(--rz-accent-hover);
  --pico-primary-hover-border: var(--rz-accent-hover);
  --pico-primary-underline: rgba(26, 77, 124, .5);
  --pico-primary-inverse: #fff;
  --pico-form-element-background-color: var(--rz-surface);
  --pico-form-element-border-color: var(--rz-line);
  --pico-form-element-active-border-color: var(--rz-blue);
  --pico-card-background-color: var(--rz-surface);
  --pico-card-border-color: var(--rz-line);
}