/* KIX Labs "Ink" tokens for the Homeguard preview landing page.
   The only token source: no raw colour, size or duration outside this file.
   Values are taken from the KIX Labs design system (tokens/colors.css, typography.css,
   spacing.css, lines.css, motion.css), trimmed to what this page uses.
   Theme follows the device (prefers-color-scheme). [data-kx-theme] forces a theme for the
   design boards only; the shipped page never sets it. */

:root,
[data-kx-theme="light"] {
  color-scheme: light;

  /* ramp */
  --kx-ink: #0A0A0A;
  --kx-ink-90: #171716;
  --kx-ink-80: #262625;
  --kx-ink-70: #3A3A38;
  --kx-ink-60: #5A5A58;
  --kx-ink-20: #C9C8C2;
  --kx-ink-10: #E2E1DC;
  --kx-paper: #FAFAF8;
  --kx-white: #FFFFFF;
  --kx-muted-on-ink: #A3A3A0;

  /* the one accent, same in both themes */
  --kx-accent: #FF4D00;
  --kx-accent-press: #E04300;

  /* light theme roles */
  --kx-bg: var(--kx-paper);
  --kx-bg-raised: var(--kx-white);
  --kx-bg-invert: var(--kx-ink);
  --kx-text: var(--kx-ink);
  --kx-text-muted: var(--kx-ink-60);           /* 6.62:1 on paper, 6.95:1 on white */
  --kx-text-invert: var(--kx-paper);
  --kx-text-invert-muted: var(--kx-muted-on-ink); /* 7.83:1 on ink */
  --kx-rule-band: var(--kx-ink-20);
  --kx-rule-row: var(--kx-ink-10);
  --kx-focus: var(--kx-accent);
  --kx-selection-bg: var(--kx-accent);
  --kx-selection-fg: var(--kx-ink);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-kx-theme="light"]) {
    color-scheme: dark;
    --kx-bg: var(--kx-ink);
    --kx-bg-raised: var(--kx-ink-90);
    --kx-bg-invert: var(--kx-paper);
    --kx-text: var(--kx-paper);
    --kx-text-muted: var(--kx-muted-on-ink);    /* 7.83:1 on ink, 7.20:1 on ink-90 */
    --kx-text-invert: var(--kx-ink);
    --kx-text-invert-muted: var(--kx-ink-60);   /* 6.62:1 on paper */
    --kx-rule-band: var(--kx-ink-70);
    --kx-rule-row: var(--kx-ink-80);
  }
}

[data-kx-theme="dark"] {
  color-scheme: dark;
  --kx-bg: var(--kx-ink);
  --kx-bg-raised: var(--kx-ink-90);
  --kx-bg-invert: var(--kx-paper);
  --kx-text: var(--kx-paper);
  --kx-text-muted: var(--kx-muted-on-ink);
  --kx-text-invert: var(--kx-ink);
  --kx-text-invert-muted: var(--kx-ink-60);
  --kx-rule-band: var(--kx-ink-70);
  --kx-rule-row: var(--kx-ink-80);
}

:root {
  /* families */
  --kx-font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --kx-font-body: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --kx-font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* display width axis (font-stretch %), stepped by viewport as in the system */
  --kx-display-width: 118%;
  --kx-display-width-max: 125%;

  --kx-weight-regular: 400;
  --kx-weight-medium: 500;
  --kx-weight-semibold: 600;
  --kx-weight-black: 900;

  /* scale used here */
  --kx-size-d2: clamp(2rem, 4.2vw, 3.5rem);   /* page heading */
  --kx-size-card-num: clamp(5rem, 7.2vw, 6.5rem); /* 104px card numeral at 1440, 86px at 1200 */
  --kx-size-row-num: 2.5rem;                   /* 40px row numeral below 1200 */
  --kx-size-wordmark: 1.8125rem;               /* 29px = 0.9 x 32px mark */
  --kx-size-lead: clamp(1.0625rem, 1.6vw, 1.3125rem);
  --kx-size-label-card: 1.1875rem;             /* 19px card label */
  --kx-size-body: 1rem;
  --kx-size-body-sm: 0.9375rem;
  --kx-size-caption: 0.8125rem;
  --kx-size-label: 0.75rem;
  --kx-size-label-sm: 0.6875rem;

  --kx-leading-display: 0.92;
  --kx-leading-tight: 1.2;
  --kx-leading-body: 1.55;
  --kx-track-display: -0.03em;
  --kx-track-label: 0.16em;
  --kx-track-label-wide: 0.24em;

  /* space, 4px base */
  --kx-space-1: 0.25rem;
  --kx-space-2: 0.5rem;
  --kx-space-3: 0.75rem;
  --kx-space-4: 1rem;
  --kx-space-5: 1.5rem;
  --kx-space-6: 2rem;
  --kx-space-7: 3rem;
  --kx-space-8: 4rem;
  --kx-gutter: var(--kx-space-5);
  --kx-gutter-lg: var(--kx-space-8);
  --kx-page-max: 1440px;
  --kx-measure: 62ch;
  --kx-mark-header: 32px;
  --kx-icon: 16px;
  --kx-row-h: 68px;      /* stacked row, below 1200 */
  --kx-card-h: 264px;    /* card, seven across */

  /* lines */
  --kx-hairline: 1px;
  --kx-radius-0: 0;
  --kx-focus-width: 2px;
  --kx-focus-offset: 2px;
  --kx-scrollbar: 10px;
  --kx-scrollbar-inset: 2px;

  /* motion */
  --kx-dur-fast: 120ms;
  --kx-ease: cubic-bezier(0.2, 0, 0, 1);
}

/* Display width axis steps by the page container's width (see site.css: body is the container). */
@container page (max-width: 480px) {
  .page { --kx-display-width: 92%; }
}
@container page (max-width: 360px) {
  .page { --kx-display-width: 78%; }
}
@media (prefers-reduced-motion: reduce) {
  :root { --kx-dur-fast: 0ms; }
}