/* ZenInsure design system tokens · v1 · 2026-10-09 · source: design/brand/design-system.md */
:root {
  color-scheme: light dark;

  /* Scales */
  --zi-cyan-50: #ecf9ff; --zi-cyan-100: #d4f3ff; --zi-cyan-200: #aee8fe; --zi-cyan-300: #7cd9fa;
  --zi-cyan-400: #4cc6ee; --zi-cyan-500: #14b3dd; --zi-cyan-600: #0a94b8; --zi-cyan-700: #047795;
  --zi-cyan-800: #035d75; --zi-cyan-900: #02475a; --zi-cyan-950: #03313e;
  --zi-green-50: #f0fbe6; --zi-green-100: #e3f6d3; --zi-green-200: #cfedb5; --zi-green-300: #b5dd90;
  --zi-green-400: #99c56e; --zi-green-500: #7fab51; --zi-green-600: #668f3b; --zi-green-700: #50722a;
  --zi-green-800: #3e5920; --zi-green-900: #2f4517; --zi-green-950: #20300f;
  --zi-slate-50: #eef7ff; --zi-slate-100: #e6eef7; --zi-slate-200: #d8e1eb; --zi-slate-300: #c5cfda;
  --zi-slate-400: #a1acb8; --zi-slate-500: #7c8794; --zi-slate-600: #65707d; --zi-slate-700: #4d5864;
  --zi-slate-800: #3a4551; --zi-slate-850: #313c48; --zi-slate-900: #28333f; --zi-slate-950: #161f28;
  --zi-amber-50: #fff5ea; --zi-amber-100: #ffebd5; --zi-amber-200: #fedab2; --zi-amber-300: #fec581;
  --zi-amber-400: #ffad3f; --zi-amber-500: #f09c17; --zi-amber-600: #c88009; --zi-amber-700: #a06604;
  --zi-amber-800: #7e4f04; --zi-amber-900: #603c07; --zi-amber-950: #412805;
  --zi-red-50: #fef2f1; --zi-red-100: #fee4e1; --zi-red-200: #ffcdc8; --zi-red-300: #ffaba3;
  --zi-red-400: #fb817a; --zi-red-500: #ec5b57; --zi-red-600: #d54141; --zi-red-700: #b13131;
  --zi-red-800: #902828; --zi-red-900: #6f2120; --zi-red-950: #4c1716;
  --zi-gray: #484848;
  --zi-white: #ffffff;

  /* Semantic colours: light */
  --zi-color-bg: var(--zi-slate-50);
  --zi-color-surface: var(--zi-white);
  --zi-color-surface-muted: var(--zi-slate-50);
  --zi-color-surface-inverse: var(--zi-slate-900);
  --zi-color-surface-inverse-hover: var(--zi-slate-800);
  --zi-color-text: var(--zi-slate-900);
  --zi-color-text-secondary: var(--zi-gray);
  --zi-color-text-muted: var(--zi-slate-600);
  --zi-color-text-inverse: var(--zi-white);
  --zi-color-border: var(--zi-slate-200);
  --zi-color-border-strong: var(--zi-slate-500);
  --zi-color-brand: var(--zi-cyan-500);
  --zi-color-brand-soft: var(--zi-cyan-50);
  --zi-color-primary: var(--zi-cyan-500);
  --zi-color-primary-hover: var(--zi-cyan-400);
  --zi-color-on-primary: var(--zi-slate-900);
  --zi-color-selected: var(--zi-cyan-700);
  --zi-color-on-selected: var(--zi-white);
  --zi-color-link: var(--zi-cyan-700);
  --zi-color-focus: var(--zi-cyan-600);
  --zi-color-success-text: var(--zi-green-700);
  --zi-color-success-bg: var(--zi-green-50);
  --zi-color-success-accent: var(--zi-green-400);
  --zi-color-warning-text: var(--zi-amber-800);
  --zi-color-warning-bg: var(--zi-amber-50);
  --zi-color-warning-accent: var(--zi-amber-500);
  --zi-color-danger-text: var(--zi-red-700);
  --zi-color-danger-bg: var(--zi-red-50);
  --zi-color-danger-accent: var(--zi-red-600);
  --zi-color-info-text: var(--zi-cyan-800);
  --zi-color-info-bg: var(--zi-cyan-50);
  --zi-color-info-accent: var(--zi-cyan-500);
  --zi-shadow-sm: 0 1px 2px rgb(40 51 63 / 0.06), 0 4px 14px -6px rgb(40 51 63 / 0.14);
  --zi-shadow-md: 0 10px 28px -8px rgb(40 51 63 / 0.22);

  /* Type */
  --zi-font-sans: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --zi-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --zi-text-xs: 11px; --zi-text-sm: 12px; --zi-text-md: 13px; --zi-text-lg: 14px;
  --zi-text-xl: 16px; --zi-text-2xl: 20px; --zi-text-3xl: 24px;

  /* Space, shape, motion */
  --zi-space-1: 4px; --zi-space-2: 8px; --zi-space-3: 12px; --zi-space-4: 16px;
  --zi-space-5: 20px; --zi-space-6: 24px; --zi-space-8: 32px;
  --zi-radius-xs: 4px; --zi-radius-sm: 6px; --zi-radius-md: 10px; --zi-radius-lg: 14px; --zi-radius-full: 999px;
  --zi-duration: 150ms;
  --zi-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --zi-color-bg: var(--zi-slate-950);
    --zi-color-surface: var(--zi-slate-900);
    --zi-color-surface-muted: var(--zi-slate-850);
    --zi-color-surface-inverse: var(--zi-slate-50);
    --zi-color-surface-inverse-hover: var(--zi-slate-200);
    --zi-color-text: var(--zi-slate-50);
    --zi-color-text-secondary: var(--zi-slate-300);
    --zi-color-text-muted: var(--zi-slate-400);
    --zi-color-text-inverse: var(--zi-slate-950);
    --zi-color-border: var(--zi-slate-800);
    --zi-color-brand-soft: var(--zi-cyan-950);
    --zi-color-on-primary: var(--zi-slate-950);
    --zi-color-selected: var(--zi-cyan-400);
    --zi-color-on-selected: var(--zi-slate-950);
    --zi-color-link: var(--zi-cyan-400);
    --zi-color-focus: var(--zi-cyan-400);
    --zi-color-success-text: var(--zi-green-300);
    --zi-color-success-bg: var(--zi-green-950);
    --zi-color-warning-text: var(--zi-amber-300);
    --zi-color-warning-bg: var(--zi-amber-950);
    --zi-color-warning-accent: var(--zi-amber-400);
    --zi-color-danger-text: var(--zi-red-300);
    --zi-color-danger-bg: var(--zi-red-950);
    --zi-color-danger-accent: var(--zi-red-400);
    --zi-color-info-text: var(--zi-cyan-300);
    --zi-color-info-bg: var(--zi-cyan-950);
    --zi-color-info-accent: var(--zi-cyan-400);
    --zi-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.3), 0 6px 18px -8px rgb(0 0 0 / 0.5);
    --zi-shadow-md: 0 12px 32px -8px rgb(0 0 0 / 0.6);
  }
}