/* ==========================================================================
   InsureKenya — design tokens
   Colors are stored as raw RGB triplets so Tailwind's `<alpha-value>` opacity
   modifiers keep working (see assets/js/tw-config.js). Anything that needs a
   ready-to-use color also gets a convenience var for print.css and inline SVG.
   ========================================================================== */

:root {
  /* --- brand -------------------------------------------------------------
     Deeper and warmer than Tailwind's default green-600. This is bereavement
     cover, not a growth app: it should read institutional, while staying
     adjacent to the green everyone already associates with M-Pesa. */
  --brand-50-rgb:  236 248 241;
  --brand-100-rgb: 209 238 221;
  --brand-200-rgb: 160 219 187;
  --brand-300-rgb: 106 197 152;
  --brand-400-rgb:  52 173 116;
  --brand-500-rgb:  18 160  90;
  --brand-600-rgb:  15 123  69;
  --brand-700-rgb:  13  97  56;
  --brand-800-rgb:  11  74  44;
  --brand-900-rgb:  10  54  34;

  /* --- accent — warm gold, one focal element per view --------------------- */
  --accent-50-rgb:  254 247 232;
  --accent-100-rgb: 253 236 200;
  --accent-400-rgb: 249 197  86;
  --accent-500-rgb: 242 168  29;
  --accent-600-rgb: 201 133  12;
  --accent-700-rgb: 154 100   8;

  /* --- ink & neutrals, faintly green-cast --------------------------------- */
  --ink-900-rgb:  11  27  18;
  --ink-800-rgb:  27  44  34;
  --ink-700-rgb:  45  62  52;
  --ink-500-rgb:  96 112 102;
  --ink-400-rgb: 141 155 146;
  --ink-300-rgb: 186 197 190;
  --line-rgb:    224 232 227;
  --line-2-rgb:  238 244 240;
  --canvas-rgb:  247 249 247;
  --surface-rgb: 255 255 255;
  --surface-2-rgb: 241 245 242;

  /* --- semantic ----------------------------------------------------------- */
  --ok-rgb:     18 160  90;
  --warn-rgb:  217 119   6;
  --danger-rgb:185  28  28;
  --info-rgb:   37  99 235;

  /* --- convenience (print.css + SVG use these directly) ------------------- */
  --brand-50:  rgb(var(--brand-50-rgb));
  --brand-100: rgb(var(--brand-100-rgb));
  --brand-200: rgb(var(--brand-200-rgb));
  --brand-300: rgb(var(--brand-300-rgb));
  --brand-400: rgb(var(--brand-400-rgb));
  --brand-500: rgb(var(--brand-500-rgb));
  --brand-600: rgb(var(--brand-600-rgb));
  --brand-700: rgb(var(--brand-700-rgb));
  --brand-800: rgb(var(--brand-800-rgb));
  --brand-900: rgb(var(--brand-900-rgb));
  --accent-100: rgb(var(--accent-100-rgb));
  --accent-400: rgb(var(--accent-400-rgb));
  --accent-500: rgb(var(--accent-500-rgb));
  --accent-600: rgb(var(--accent-600-rgb));
  --accent-700: rgb(var(--accent-700-rgb));
  --ink-900: rgb(var(--ink-900-rgb));
  --ink-800: rgb(var(--ink-800-rgb));
  --ink-700: rgb(var(--ink-700-rgb));
  --ink-500: rgb(var(--ink-500-rgb));
  --ink-400: rgb(var(--ink-400-rgb));
  --ink-300: rgb(var(--ink-300-rgb));
  --line:    rgb(var(--line-rgb));
  --line-2:  rgb(var(--line-2-rgb));
  --canvas:  rgb(var(--canvas-rgb));
  --surface: rgb(var(--surface-rgb));
  --surface-2: rgb(var(--surface-2-rgb));
  --ok:     rgb(var(--ok-rgb));
  --warn:   rgb(var(--warn-rgb));
  --danger: rgb(var(--danger-rgb));
  --info:   rgb(var(--info-rgb));

  /* --- shape --------------------------------------------------------------- */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-full: 999px;

  --shadow-sm: 0 1px 2px rgb(var(--ink-900-rgb) / .06);
  --shadow-md: 0 6px 16px -4px rgb(var(--ink-900-rgb) / .10),
               0 2px 4px rgb(var(--ink-900-rgb) / .06);
  --shadow-lg: 0 20px 40px -12px rgb(var(--ink-900-rgb) / .18);
  --ring: 0 0 0 3px rgb(var(--brand-500-rgb) / .35);

  /* --- type ---------------------------------------------------------------- */
  --font-display: 'Fraunces', ui-serif, Georgia, 'Times New Roman', serif;
  --font-sans: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system,
               'Segoe UI', Roboto, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
}