/* ─────────────────────────────────────────────────────────────────────────────
   PoolQuant — design tokens
   Single source of truth. Imported by base.html and every hi-fi static page.
   Mirror in app/static/tokens.json for tooling.
   ───────────────────────────────────────────────────────────────────────────── */

:root {
  /* ── color · neutrals ──────────────────────────────────────────────────── */
  --pq-paper:       #f6f8fb;   /* page bg */
  --pq-paper-2:     #eef2f7;   /* sunken / inset */
  --pq-surface:     #ffffff;   /* card */
  --pq-surface-2:   #f3f6fa;   /* card sunken / hover */
  --pq-line:        #e3e8ef;   /* hairline */
  --pq-line-2:      #d6dce6;   /* hairline strong */
  --pq-ink:         #0f2230;   /* body text */
  --pq-ink-2:       #2c4250;   /* secondary text */
  --pq-ink-3:       #6c8092;   /* tertiary text */
  --pq-ink-4:       #a4b3c2;   /* disabled / placeholder */

  /* ── color · brand (deep water droplet — Direction A) ─────────────────── */
  /* Icon canvas runs from --pq-brand at the top to --pq-brand-deep at the bottom; */
  /* the droplet pops with --pq-brand-droplet against the navy. UI accents derive */
  /* from this palette. */
  --pq-brand-deep:  #04202d;   /* deepest — icon base, dark UI bg, theme color */
  --pq-brand-mid:   #073143;   /* mid stop in the icon gradient */
  --pq-brand:       #0d4a63;   /* primary — buttons, mark, links */
  --pq-brand-hover: #073143;   /* primary hover/active (darker) */
  --pq-brand-bright:#7cc6e0;   /* droplet cyan — accents, charts, sparklines */
  --pq-brand-soft:  #b6dde9;   /* hairline tints */
  --pq-brand-tint:  #e6f3f8;   /* fill tint */
  --pq-brand-tint-2:#d2e9f1;   /* fill tint, slightly stronger */
  --pq-brand-droplet:    #7cc6e0;  /* droplet body */
  --pq-brand-droplet-hi: #e8f4fa;  /* droplet highlight */

  /* legacy aliases — keep so existing mid-fi pages don't break */
  --pq-brand-2:     #04202d;
  --pq-brand-3:     #04202d;

  /* secondary accent — used sparingly for editorial moments */
  --pq-accent:      #1f6f8b;   /* deep teal */
  --pq-accent-soft: #c2dde6;
  --pq-accent-tint: #ebf4f8;

  /* ── color · semantic ─────────────────────────────────────────────────── */
  --pq-good:        #1f8a5c;
  --pq-good-soft:   #cfe9d9;
  --pq-good-tint:   #e6f4ec;

  --pq-warn:        #b8722a;
  --pq-warn-soft:   #f1d8b3;
  --pq-warn-tint:   #fbf0dd;

  --pq-bad:         #b13a3a;
  --pq-bad-soft:    #f0c3c3;
  --pq-bad-tint:    #fbe5e5;

  --pq-info:        #2c6db8;
  --pq-info-soft:   #c9d9ee;
  --pq-info-tint:   #e6eef8;

  /* per-entry-kind borders (matches the existing Flask app's vocabulary) */
  --pq-kind-measurement: #1f8a5c;
  --pq-kind-action:      #b8722a;
  --pq-kind-note:        #6c8092;
  --pq-kind-question:    #2c6db8;
  --pq-kind-image:       #6f4cb8;
  --pq-kind-rejected:    #b13a3a;
  --pq-kind-assistant:   #0a6b8c;
  --pq-kind-weather:     #4a9bc7;

  /* ── type ─────────────────────────────────────────────────────────────── */
  --pq-font-sans:   'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --pq-font-serif:  'Source Serif 4', 'Source Serif Pro', Georgia, 'Times New Roman', serif;
  --pq-font-mono:   'JetBrains Mono', 'SF Mono', Menlo, Monaco, Consolas, monospace;

  /* type scale — 1.20 minor third, anchored at 14 */
  --pq-text-2xs: 10px;
  --pq-text-xs:  11px;
  --pq-text-sm:  12px;
  --pq-text-md:  13px;     /* body small */
  --pq-text-base:14px;     /* body */
  --pq-text-lg:  16px;     /* body large */
  --pq-text-xl:  18px;
  --pq-text-2xl: 22px;
  --pq-text-3xl: 26px;
  --pq-text-4xl: 32px;
  --pq-text-5xl: 40px;

  /* line-heights */
  --pq-lh-tight:  1.15;
  --pq-lh-snug:   1.35;
  --pq-lh-normal: 1.5;
  --pq-lh-prose:  1.65;

  /* weights */
  --pq-fw-regular:  400;
  --pq-fw-medium:   500;
  --pq-fw-semibold: 600;
  --pq-fw-bold:     700;

  /* ── space (4-px grid) ────────────────────────────────────────────────── */
  --pq-space-1:  4px;
  --pq-space-2:  8px;
  --pq-space-3:  12px;
  --pq-space-4:  16px;
  --pq-space-5:  20px;
  --pq-space-6:  24px;
  --pq-space-8:  32px;
  --pq-space-10: 40px;
  --pq-space-12: 48px;
  --pq-space-16: 64px;

  /* ── radius ───────────────────────────────────────────────────────────── */
  --pq-radius-sm: 4px;
  --pq-radius-md: 6px;
  --pq-radius-lg: 8px;
  --pq-radius-xl: 12px;
  --pq-radius-2xl: 16px;
  --pq-radius-pill: 999px;

  /* ── shadow ───────────────────────────────────────────────────────────── */
  --pq-shadow-1: 0 1px 2px rgba(13, 60, 90, 0.05);
  --pq-shadow-2: 0 2px 6px rgba(13, 60, 90, 0.07);
  --pq-shadow-3: 0 4px 16px rgba(13, 60, 90, 0.10);
  --pq-shadow-pop: 0 8px 32px rgba(13, 60, 90, 0.18);

  /* ── motion ───────────────────────────────────────────────────────────── */
  --pq-ease:        cubic-bezier(0.2, 0, 0, 1);
  --pq-ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --pq-dur-fast:    120ms;
  --pq-dur-base:    180ms;
  --pq-dur-slow:    320ms;

  /* ── layout ───────────────────────────────────────────────────────────── */
  --pq-content-narrow:  640px;   /* prose (Summary) */
  --pq-content-base:    760px;   /* chat */
  --pq-content-wide:    960px;   /* trends */

  /* ── focus ring (a11y) ────────────────────────────────────────────────── */
  --pq-focus: 0 0 0 2px var(--pq-paper), 0 0 0 4px var(--pq-brand-bright);

  /* ── z-index ──────────────────────────────────────────────────────────── */
  --pq-z-sticky:  10;
  --pq-z-overlay: 50;
  --pq-z-modal:   100;
  --pq-z-toast:   200;
}

/* Reduced-motion users: collapse durations */
@media (prefers-reduced-motion: reduce) {
  :root {
    --pq-dur-fast: 0ms;
    --pq-dur-base: 0ms;
    --pq-dur-slow: 0ms;
  }
}

/* Dark-mode placeholder — DO NOT enable in v1.
   Tokens listed for completeness so devs know the contract is colorspace-aware. */
@media (prefers-color-scheme: dark) {
  /* :root { --pq-paper: #0a141c; ... } */
  /* Intentionally unset for v1 light-only ship. */
}
/* PoolQuant v2 design tokens — copy of system.css :root */
:root {

  /* paper — warm, not white */
  --paper:        #fbfaf7;     /* canvas */
  --paper-2:      #f4f2ec;     /* recessed surface (rare; only for sheets) */
  --paper-tint:   rgba(13, 74, 99, 0.04); /* selection wash */

  /* ink — never pure black */
  --ink:          #161a1f;
  --ink-2:        #4a5560;
  --ink-3:        #8893a0;
  --ink-4:        #b8c1cb;
  --rule:         rgba(22, 26, 31, 0.08);
  --rule-strong:  rgba(22, 26, 31, 0.16);

  /* brand (from icon) */
  --brand-deep:   #04202d;
  --brand:        #0d4a63;
  --brand-droplet:#7cc6e0;

  /* chemistry palette — calm, like Apple Health */
  --chem-chlorine: #1f8fb8;     /* FC, Br */
  --chem-ph:       #d18a2c;     /* pH */
  --chem-alk:      #b8682c;     /* TA */
  --chem-cya:      #6b8a4a;     /* CYA */
  --chem-salt:     #5a7a8a;     /* salt */
  --chem-temp:     #c44a2a;     /* temp */
  --chem-pressure: #6e5aa8;     /* filter pressure */
  --chem-clarity:  #2a8a8a;     /* clarity / visibility */

  /* status (used for ranges) */
  --ok:           #2f7a4f;
  --ok-bg:        rgba(47, 122, 79, 0.10);
  --warn:         #b86a18;
  --warn-bg:      rgba(184, 106, 24, 0.10);
  --bad:          #b8362c;
  --bad-bg:       rgba(184, 54, 44, 0.10);

  /* type — system stack, mono for numbers */
  --type-ui:      -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter Tight", Inter, system-ui, sans-serif;
  --type-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter Tight", Inter, system-ui, sans-serif;
  --type-num:     ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Monaco, "Cascadia Mono", monospace;
  --type-serif:   ui-serif, "New York", Georgia, "Times New Roman", serif;

  /* radii — small, restrained. only on tappables. */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;

  /* spacing — generous */
  --gutter: 24px;
  --col-narrow: 680px;
  --col-wide: 920px;

}