/* Vektren — brand tokens. Load after the design-system styles.css; edit values here only. */
:root {
  /* Colour */
  --vk-orange: #f15f22;            /* sampled from the existing wordmark */
  --vk-ink: #141312;
  --vk-white: #ffffff;

  --color-bg: var(--vk-white);
  --color-surface: #f4f3f2;
  --color-text: var(--vk-ink);
  --color-accent: var(--vk-orange);
  --color-divider: color-mix(in srgb, var(--color-text) 40%, transparent);
  --vk-rule: var(--color-text);    /* strong 2px structural rule */

  --color-accent-100: #fff3ec;
  --color-accent-200: #ffe2d2;
  --color-accent-300: #ffc7a8;
  --color-accent-400: #ff9d6b;
  --color-accent-500: #f15f22;
  --color-accent-600: #d94e12;
  --color-accent-700: #a93a08;     /* orange for body-size text on white */
  --color-accent-800: #7a2c0a;
  --color-accent-900: #4c1e0c;
  --vk-link-hover: var(--color-accent-700);

  /* Layout */
  --vk-margin: clamp(16px, 3vw, 40px);

  /* Wordmark metrics — all in multiples of cap height (--vk-h) */
  --vk-w-v: 0.9133; --vk-w-e1: 0.6587; --vk-w-k: 0.8118; --vk-w-t: 0.7712;
  --vk-w-r: 0.7952; --vk-w-e2: 0.6568; --vk-w-n: 0.81;
  /* Optical gaps between letter pairs (the cleanup) */
  --vk-g-ve: 0.0526; --vk-g-ek: 0.1026; --vk-g-kt: 0.0426;
  --vk-g-tr: 0.0626; --vk-g-re: 0.0726; --vk-g-en: 0.1026;
  --vk-ratio: calc(var(--vk-w-v) + var(--vk-w-e1) + var(--vk-w-k) + var(--vk-w-t) + var(--vk-w-r) + var(--vk-w-e2) + var(--vk-w-n)
    + var(--vk-g-ve) + var(--vk-g-ek) + var(--vk-g-kt) + var(--vk-g-tr) + var(--vk-g-re) + var(--vk-g-en));
  --vk-h: 32px;
}

/* Dark ground — put on any container */
.vk-on-dark, [data-ground="dark"] {
  --color-bg: var(--vk-ink);
  --color-surface: #211f1e;
  --color-text: #f5f4f3;
  --vk-link-hover: var(--vk-orange);
  --vk-rule: var(--color-text);
  --color-divider: color-mix(in srgb, var(--color-text) 40%, transparent);
}
/* Orange ground — wordmark and type go white */
.vk-on-accent {
  --color-bg: var(--vk-orange);
  --color-text: var(--vk-white);
  --color-accent: var(--vk-white);
  --vk-rule: var(--color-text);
  --color-divider: color-mix(in srgb, var(--color-text) 40%, transparent);
}