/*
 * misterj house tokens 1.0: the single source for colours, type, spacing, radius, shadow and motion.
 *
 * Self-contained on purpose: no URL references, no selectors other than :root, no app classes. The same file is
 * served by Vitrine at /css/tokens.css and is meant to be served unchanged as /lib/misterj/1.0/tokens.css
 * (VT-21). Design and rules: docs/ui-design.md.
 *
 * Theme: light by default, dark through prefers-color-scheme, and a manual choice through
 * <html data-theme="light|dark">, which wins over the system setting in both directions.
 * The dark values appear twice (system and manual) because plain CSS cannot share one block for both.
 *
 * The values equal the report renderer's inline tokens (src/Vitrine.Reports/ReportPage.razor, --vt-*);
 * docs/ui-design.md lists the mapping and the remaining differences.
 */

:root {
  color-scheme: light dark;

  /* Type. Inter and JetBrains Mono come with VT-21; until then the system fonts take over. */
  --mj-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mj-font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, Consolas, monospace;
  --mj-text-xs: 0.75rem;
  --mj-text-sm: 0.875rem;
  --mj-text-base: 1rem;
  --mj-text-lg: 1.125rem;
  --mj-text-xl: 1.375rem;
  --mj-text-2xl: 1.75rem;
  --mj-leading-tight: 1.25;
  --mj-leading: 1.5;
  --mj-weight-regular: 400;
  --mj-weight-medium: 550;
  --mj-weight-bold: 650;

  /* Spacing: a 4 px base. */
  --mj-space-1: 0.25rem;
  --mj-space-2: 0.5rem;
  --mj-space-3: 0.75rem;
  --mj-space-4: 1rem;
  --mj-space-5: 1.5rem;
  --mj-space-6: 2rem;
  --mj-space-7: 3rem;

  /* Shape and layout. */
  --mj-radius-sm: 0.25rem;
  --mj-radius-md: 0.5rem;
  --mj-radius-lg: 0.75rem;
  --mj-radius-pill: 999px;
  --mj-border-width: 1px;
  --mj-focus-width: 2px;
  --mj-focus-offset: 2px;
  --mj-content-max: 72rem;
  --mj-reading-max: 42rem;
  --mj-control-height: 2.5rem;

  /* Motion. prefers-reduced-motion sets the durations to zero below. */
  --mj-duration-fast: 120ms;
  --mj-duration: 200ms;
  --mj-easing: cubic-bezier(0.2, 0, 0, 1);

  /* Colour: light. Text pairs meet WCAG AA (4.5:1) on canvas, surface and their soft backgrounds. */
  --mj-canvas: #f6f7f9;
  --mj-surface: #ffffff;
  --mj-surface-2: #f2f4f7;
  --mj-border: #d9dee7;
  --mj-border-strong: #9da7b5;
  --mj-border-control: #7d8796;
  --mj-text: #20252d;
  --mj-text-muted: #626b78;
  --mj-accent: #175cd3;
  --mj-accent-hover: #1849a9;
  --mj-accent-soft: #eef4ff;
  --mj-on-accent: #ffffff;
  --mj-focus: #175cd3;
  --mj-info: #175cd3;
  --mj-info-soft: #f4f8ff;
  --mj-good: #087443;
  --mj-good-soft: #f1faf5;
  --mj-warn: #b54708;
  --mj-warn-soft: #fffaeb;
  --mj-bad: #b42318;
  --mj-bad-soft: #fff4f2;
  --mj-kind-page: #175cd3;
  --mj-kind-page-soft: #eef4ff;
  --mj-kind-site: #6941c6;
  --mj-kind-site-soft: #f4f3ff;
  --mj-kind-report: #0e7490;
  --mj-kind-report-soft: #ecfdff;
  --mj-series-0: #2563eb;
  --mj-series-1: #dc2626;
  --mj-series-2: #059669;
  --mj-series-3: #d97706;
  --mj-series-4: #7c3aed;
  --mj-series-5: #0891b2;
  --mj-series-6: #db2777;
  --mj-series-7: #4d7c0f;
  --mj-shadow-1: 0 1px 2px rgb(16 24 40 / 0.06), 0 1px 3px rgb(16 24 40 / 0.08);
  --mj-shadow-2: 0 4px 8px -2px rgb(16 24 40 / 0.1), 0 12px 24px -4px rgb(16 24 40 / 0.12);
  --mj-backdrop: rgb(16 24 40 / 0.45);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --mj-canvas: #111316;
    --mj-surface: #17191d;
    --mj-surface-2: #252a32;
    --mj-border: #3a404a;
    --mj-border-strong: #5d6673;
    --mj-border-control: #6b7480;
    --mj-text: #e6e8eb;
    --mj-text-muted: #9aa3af;
    --mj-accent: #84adff;
    --mj-accent-hover: #a4c2ff;
    --mj-accent-soft: #182435;
    --mj-on-accent: #0b1220;
    --mj-focus: #84adff;
    --mj-info: #84adff;
    --mj-info-soft: #182435;
    --mj-good: #4ade80;
    --mj-good-soft: #10251d;
    --mj-warn: #fdb022;
    --mj-warn-soft: #2a2115;
    --mj-bad: #f87171;
    --mj-bad-soft: #2b1919;
    --mj-kind-page: #84adff;
    --mj-kind-page-soft: #182435;
    --mj-kind-site: #bea4ff;
    --mj-kind-site-soft: #241d3a;
    --mj-kind-report: #62d6ee;
    --mj-kind-report-soft: #0f2a30;
    --mj-series-0: #84adff;
    --mj-series-1: #ff8179;
    --mj-series-2: #5ee0aa;
    --mj-series-3: #ffc46b;
    --mj-series-4: #bea4ff;
    --mj-series-5: #62d6ee;
    --mj-series-6: #ff8dc9;
    --mj-series-7: #b5d96a;
    --mj-shadow-1: 0 1px 2px rgb(0 0 0 / 0.4);
    --mj-shadow-2: 0 4px 8px -2px rgb(0 0 0 / 0.5), 0 12px 24px -4px rgb(0 0 0 / 0.5);
    --mj-backdrop: rgb(0 0 0 / 0.6);
  }
}

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

:root[data-theme="dark"] {
  color-scheme: dark;
  --mj-canvas: #111316;
  --mj-surface: #17191d;
  --mj-surface-2: #252a32;
  --mj-border: #3a404a;
  --mj-border-strong: #5d6673;
  --mj-border-control: #6b7480;
  --mj-text: #e6e8eb;
  --mj-text-muted: #9aa3af;
  --mj-accent: #84adff;
  --mj-accent-hover: #a4c2ff;
  --mj-accent-soft: #182435;
  --mj-on-accent: #0b1220;
  --mj-focus: #84adff;
  --mj-info: #84adff;
  --mj-info-soft: #182435;
  --mj-good: #4ade80;
  --mj-good-soft: #10251d;
  --mj-warn: #fdb022;
  --mj-warn-soft: #2a2115;
  --mj-bad: #f87171;
  --mj-bad-soft: #2b1919;
  --mj-kind-page: #84adff;
  --mj-kind-page-soft: #182435;
  --mj-kind-site: #bea4ff;
  --mj-kind-site-soft: #241d3a;
  --mj-kind-report: #62d6ee;
  --mj-kind-report-soft: #0f2a30;
  --mj-series-0: #84adff;
  --mj-series-1: #ff8179;
  --mj-series-2: #5ee0aa;
  --mj-series-3: #ffc46b;
  --mj-series-4: #bea4ff;
  --mj-series-5: #62d6ee;
  --mj-series-6: #ff8dc9;
  --mj-series-7: #b5d96a;
  --mj-shadow-1: 0 1px 2px rgb(0 0 0 / 0.4);
  --mj-shadow-2: 0 4px 8px -2px rgb(0 0 0 / 0.5), 0 12px 24px -4px rgb(0 0 0 / 0.5);
  --mj-backdrop: rgb(0 0 0 / 0.6);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --mj-duration-fast: 0ms;
    --mj-duration: 0ms;
  }
}