/* vetlog design system — design tokens (single source of truth).
 * No build, no CDN: plain CSS custom properties. Imported by pwa/styles.css and by
 * the Web Components' shadow roots (custom properties pierce the shadow boundary),
 * and shared with the Python web UI so every surface speaks one visual language.
 *
 * Two layers:
 *   1. Base palette/scale (--name)        — the raw values; edit colours HERE only.
 *   2. Semantic aliases (--vl-name)       — what components reference, by role.
 * Components MUST consume the --vl-* aliases, never raw hex/px, so a re-theme is a
 * one-file change. */

:root {
  /* 1. base palette */
  --bg: #F5F6F8;
  --surface: #FFFFFF;
  --surface-2: #F9FAFB;
  --surface-3: #F0F2F4;
  --ink: #111820;
  --ink-soft: #4A5568;
  --ink-faint: #8898A8;
  --line: #E4E8ED;
  --accent: #0B6E68;
  --accent-hover: #085F5A;
  --accent-soft: #E4F2F1;
  --accent-ink: #085C57;
  --accent-line: #C2E0DD;
  --danger: #B03030;
  --danger-soft: #FEF2F2;
  --danger-line: #FBCAC4;
  --warn: #A0620A;
  --warn-soft: #FEF8EE;
  --warn-line: #F0DDB8;
  --line-hover: #C8CDD4;
  --correction-soft: #EEF2FB;
  --correction-ink: #3A55A8;
  --correction-line: #D3DDF3;
  --muted: #C9D2D6;

  /* base scale */
  --radius: 16px;
  --radius-sm: 10px;
  --radius-xs: 6px;
  --shadow: 0 1px 2px rgba(10, 20, 30, .04), 0 4px 16px rgba(10, 20, 30, .07);
  --shadow-lift: 0 2px 4px rgba(10, 20, 30, .05), 0 8px 28px rgba(10, 20, 30, .09);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
          "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
  --transition: 0.18s cubic-bezier(.4, 0, .2, 1);

  /* 2. semantic aliases — the component vocabulary */
  --vl-color-accent: var(--accent);
  --vl-color-accent-hover: var(--accent-hover);
  --vl-color-accent-soft: var(--accent-soft);
  --vl-color-accent-line: var(--accent-line);
  --vl-color-danger: var(--danger);
  --vl-color-danger-soft: var(--danger-soft);
  --vl-color-danger-line: var(--danger-line);
  --vl-color-warn: var(--warn);
  --vl-color-warn-soft: var(--warn-soft);
  --vl-color-warn-line: var(--warn-line);
  --vl-color-line-hover: var(--line-hover);
  --vl-color-ink: var(--ink);
  --vl-color-ink-soft: var(--ink-soft);
  --vl-color-ink-faint: var(--ink-faint);
  --vl-on-accent: #FFFFFF;
  --vl-color-correction-soft: var(--correction-soft);
  --vl-color-correction-ink: var(--correction-ink);
  --vl-color-correction-line: var(--correction-line);
  --vl-color-muted: var(--muted);
  --vl-surface: var(--surface);
  --vl-surface-2: var(--surface-2);
  --vl-surface-3: var(--surface-3);
  --vl-line: var(--line);

  --vl-radius-card: var(--radius);
  --vl-radius-sm: var(--radius-sm);
  --vl-radius-xs: var(--radius-xs);
  --vl-elev-1: var(--shadow);
  --vl-elev-2: var(--shadow-lift);
  --vl-font: var(--font);
  --vl-transition: var(--transition);

  --vl-space-xs: 6px;
  --vl-space-sm: 8px;
  --vl-space-md: 12px;
  --vl-space-lg: 16px;
  --vl-space-xl: 24px;
  --vl-overlay-bg: rgba(11, 18, 28, 0.72);
}