/*
 * Jimalytics design tokens, v1 ("engineering notebook, in navy").
 * The ONLY place brand values live. Chrome styles and story components
 * reference these variables and never hard-code colors, fonts or sizes.
 * A redesign changes values here; a theme switch remaps the chrome layer.
 */
:root {
  /* Brand (from the J mark) */
  --j-brand: #000080;          /* navy: mark, links, emphasis */
  --j-interactive: #4a51d6;    /* hover, focus (6.1:1 on paper) */
  --j-accent: #838afc;         /* periwinkle 500: charts, fills. Never text */
  --j-accent-2: #a6abff;       /* periwinkle 300: secondary series */
  --j-accent-3: #c6c9ff;       /* periwinkle 100: highlights */
  --j-accent-4: #e8e9ff;       /* periwinkle 50: chips, inline code */

  /* Signal: the "bad" thing in a visual (invalid traffic, leaks, risk).
     Amber against navy differs in lightness, not just hue. */
  --j-signal: #f5a524;         /* 8.1:1 on ink, 2.0:1 on paper: fills/marks only */
  --j-signal-strong: #9a5b00;  /* text-safe amber on paper (5.4:1) */
  --j-signal-soft: #fdebc8;    /* tint: highlights, drafting placeholders */

  /* Neutrals */
  --j-ink: #1b1b3a;            /* headings, code ground */
  --j-text: #3a3c52;           /* body copy */
  --j-muted: #5b5d75;          /* dates, captions (6.4:1 on paper) */
  --j-line: #e1e3f2;           /* borders, rules */
  --j-surface: #f4f5ff;        /* panels, callouts */
  --j-paper: #ffffff;          /* page ground */
  --j-on-brand: #ffffff;       /* text on navy */
  --j-on-ink: #e8e9ff;         /* text on ink */

  /* Data viz series, in order */
  --j-series-1: var(--j-brand);
  --j-series-2: var(--j-accent);
  --j-series-3: var(--j-accent-2);
  --j-series-4: var(--j-accent-3);

  /* Type */
  --j-font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --j-font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --j-text-xs: 0.8125rem;      /* 13 eyebrow, mono labels */
  --j-text-sm: 0.875rem;       /* 14 meta, captions */
  --j-text-md: 1rem;           /* 16 UI */
  --j-text-body: 1.125rem;     /* 18 prose */
  --j-text-lg: 1.375rem;       /* 22 h3 */
  --j-text-xl: 1.875rem;       /* 30 h2 */
  --j-text-2xl: clamp(2.125rem, 4.5vw, 2.875rem);  /* 34-46 h1 */
  --j-text-display: clamp(2.25rem, 5vw, 3.5rem);   /* 36-56 hero */

  --j-leading-tight: 1.1;
  --j-leading-snug: 1.25;
  --j-leading-body: 1.7;

  --j-weight-regular: 400;
  --j-weight-medium: 500;
  --j-weight-semibold: 600;
  --j-weight-bold: 700;

  --j-tracking-tight: -0.02em;
  --j-tracking-eyebrow: 0.08em;

  /* Space (4px base) */
  --j-space-1: 0.25rem;
  --j-space-2: 0.5rem;
  --j-space-3: 0.75rem;
  --j-space-4: 1rem;
  --j-space-5: 1.5rem;
  --j-space-6: 2rem;
  --j-space-7: 3rem;
  --j-space-8: 4rem;
  --j-space-9: 6rem;

  /* Layout */
  --j-measure: 720px;          /* prose column */
  --j-wide: 1040px;            /* figures, charts, story visuals */
  --j-container: 1200px;       /* site chrome */
  --j-gutter: 1.5rem;

  /* Shape */
  --j-radius-sm: 4px;
  --j-radius-md: 8px;
  --j-radius-lg: 12px;
  --j-radius-xl: 16px;
  --j-radius-pill: 999px;

  /* Motion */
  --j-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --j-duration: 240ms;
}

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