/*
 * ZenMic theme — the one place colours are defined.
 *
 * Every value is "R G B" (no commas, no #) so Tailwind can add opacity: rgb(var(--zm-primary) / 0.5).
 * Change a value here and the marketing site, Studio, emails and generated images follow:
 *   - Tailwind classes are mapped to these variables in theme/tailwind.js
 *     (text-primary, bg-light, border-accent, stone-*, amber-*, brand-*).
 *   - PHP reads the same values with zm_theme_hex() in includes/theme.php (emails, images).
 *   - The logo files are drawn from --zm-primary and --zm-light by theme/make_logo.py.
 * Plain CSS uses them directly: color: rgb(var(--zm-secondary));
 *
 * Current theme: Pine and paper (2026-11-10).
 */
:root {
  /* Named colours (the Tailwind classes primary / secondary / dark / light / accent) */
  --zm-primary: 18 64 60;      /* #12403c pine: headings, main buttons, the logo tile */
  --zm-secondary: 31 107 95;   /* #1f6b5f lighter pine: links, button hover, accents on paper */
  --zm-dark: 13 48 45;         /* #0d302d pine ink: body text, dark sections */
  --zm-light: 243 236 223;     /* #f3ecdf paper: page background, the logo mark */
  --zm-accent: 219 210 191;    /* #dbd2bf paper edge: borders and dividers */

  /* Brand scale (classes brand-50 … brand-950), pine from tint to ink */
  --zm-brand-50: 238 245 242;
  --zm-brand-100: 220 235 230;
  --zm-brand-200: 181 211 203;
  --zm-brand-300: 127 179 168;
  --zm-brand-400: 63 132 120;
  --zm-brand-500: 31 107 95;
  --zm-brand-600: 24 84 76;
  --zm-brand-700: 18 64 60;
  --zm-brand-800: 13 48 45;
  --zm-brand-900: 9 36 34;
  --zm-brand-950: 5 24 22;

  /* Highlight scale (classes hi-50 … hi-950), amber: the accent on pine surfaces, notices, stars */
  --zm-hi-50: 255 251 235;
  --zm-hi-100: 254 243 199;
  --zm-hi-200: 253 230 138;
  --zm-hi-300: 252 211 77;
  --zm-hi-400: 251 191 36;
  --zm-hi-500: 245 158 11;
  --zm-hi-600: 217 119 6;
  --zm-hi-700: 180 83 9;
  --zm-hi-800: 146 64 14;
  --zm-hi-900: 120 53 15;
  --zm-hi-950: 69 26 3;

  /* Neutrals (the stone-* classes): paper tints at the light end, pine at the dark end */
  --zm-n-50: 250 247 240;
  --zm-n-100: 244 238 226;
  --zm-n-200: 232 224 208;
  --zm-n-300: 214 205 188;
  --zm-n-400: 125 119 112;     /* AA contrast for small text on white */
  --zm-n-500: 120 113 108;
  --zm-n-600: 87 83 78;
  --zm-n-700: 62 66 62;
  --zm-n-800: 28 74 68;
  --zm-n-900: 18 64 60;
  --zm-n-950: 13 48 45;
}

/*
 * The marketing site's amber-* classes follow the surface they sit on (--zm-a-*):
 * pine on paper and white, amber on pine. Same for "secondary".
 * Light surfaces first, then dark ones; the last block puts light cards inside dark sections back to pine.
 */
:root,
.bg-white, .bg-light, .bg-stone-50, .bg-stone-100, .bg-gray-50, .bg-gray-100, .bg-slate-50, .zm-on-light {
  --zm-secondary: 31 107 95;
  --zm-a-50: var(--zm-brand-50);
  --zm-a-100: var(--zm-brand-100);
  --zm-a-200: var(--zm-brand-200);
  --zm-a-300: var(--zm-brand-300);
  --zm-a-400: var(--zm-brand-400);
  --zm-a-500: var(--zm-brand-500);
  --zm-a-600: var(--zm-brand-600);
  --zm-a-700: var(--zm-brand-700);
  --zm-a-800: var(--zm-brand-800);
  --zm-a-900: var(--zm-brand-900);
  --zm-a-950: var(--zm-brand-950);
}

/* Everything inside a dark surface (the surface itself keeps the light values, so a pine button still hovers to pine) */
.bg-dark > *, .bg-primary > *, .from-dark > *, .from-primary > *,
.bg-stone-800 > *, .bg-stone-900 > *, .bg-stone-950 > *, .bg-black > *, .zm-on-dark > *, .zm-on-dark {
  --zm-secondary: 232 140 10;
  --zm-a-50: var(--zm-hi-50);
  --zm-a-100: var(--zm-hi-100);
  --zm-a-200: var(--zm-hi-200);
  --zm-a-300: var(--zm-hi-300);
  --zm-a-400: var(--zm-hi-400);
  --zm-a-500: var(--zm-hi-500);
  --zm-a-600: var(--zm-hi-600);
  --zm-a-700: var(--zm-hi-700);
  --zm-a-800: var(--zm-hi-800);
  --zm-a-900: var(--zm-hi-900);
  --zm-a-950: var(--zm-hi-950);
}

.bg-dark > .bg-white, .bg-primary > .bg-white, .bg-dark > .bg-light, .bg-primary > .bg-light,
.bg-stone-900 > .bg-white, .bg-stone-950 > .bg-white, .zm-on-dark > .bg-white, .zm-on-dark > .bg-light {
  --zm-secondary: 31 107 95;
  --zm-a-50: var(--zm-brand-50);
  --zm-a-100: var(--zm-brand-100);
  --zm-a-200: var(--zm-brand-200);
  --zm-a-300: var(--zm-brand-300);
  --zm-a-400: var(--zm-brand-400);
  --zm-a-500: var(--zm-brand-500);
  --zm-a-600: var(--zm-brand-600);
  --zm-a-700: var(--zm-brand-700);
  --zm-a-800: var(--zm-brand-800);
  --zm-a-900: var(--zm-brand-900);
  --zm-a-950: var(--zm-brand-950);
}