/*
 * Biolink Web UI — design tokens ("Daily Table" ink system, 2026-07-02).
 * Warm paper canvas, monochrome ink actions, hairline borders, one soft shadow story,
 * Fraunces editorial display (self-hosted; @font-face lives in nutrition.css which is
 * always loaded), color reserved for DATA and SEMANTICS only.
 *
 * Variable names are kept stable so app.css + app.js keep working unchanged; values are
 * re-pointed to the ink system. --gradient intentionally resolves to FLAT ink so every
 * legacy gradient surface renders as a solid ink block.
 *
 * Appearance palettes (Settings) no longer tint the chrome — they select the DATA accent
 * (chart line/fill) only: Ink (default) / Teal / Warm Sand.
 */

/* ---- self-hosted fonts (served from /app/fonts; CSP forbids external fonts) ---- */
@font-face {
  font-family: "Hanken Grotesk";
  src: url("/app/fonts/hanken-grotesk.woff2") format("woff2");
  font-weight: 300 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("/app/fonts/geist-mono.woff2") format("woff2");
  font-weight: 300 700; font-style: normal; font-display: swap;
}

:root {
  /* surfaces */
  --bg: #F8F7F4;            /* app canvas — warm paper */
  --bg-grad-1: #F8F7F4;     /* legacy stop — same paper (no ambient tint) */
  --sidebar: #F3F2EE;       /* sidebar rail — neutral warm */
  --sidebar-2: #EFEEE9;     /* sidebar gradient stop (near-flat) */
  --surface: #FFFFFF;       /* card */
  --surface-2: #FCFBF9;     /* elevated / subtle */
  --surface-3: #F2F1ED;     /* inputs, chips, tracks */

  /* borders — hairlines */
  --border: rgba(29,31,36,0.08);
  --border-strong: rgba(29,31,36,0.16);
  --border-accent: rgba(29,31,36,0.30);

  /* text */
  --text: #1D1F24;          /* ink */
  --text-2: #5C616B;        /* secondary */
  --text-3: #979CA6;        /* tertiary / labels */

  /* brand / actions — INK. Color is for data, not chrome. */
  --accent: #1D1F24;
  --accent-deep: #000206;
  --accent-2: #5C616B;      /* secondary ink (legacy gradient partner) */
  --accent-soft: rgba(29,31,36,0.06);
  --gradient: linear-gradient(135deg, #1D1F24, #1D1F24);  /* flat ink on purpose */
  --primary: #1D1F24;
  --primary-hover: #2B2E35;
  --teal: #3DA894;          /* positive / second data series */
  --violet: #1D1F24;        /* legacy alias -> ink */
  --success: #3F9D6E;
  --warning: #C8922F;
  --danger: #C75F5F;
  --on-accent: #ffffff;
  --on-primary: #ffffff;

  /* status tints */
  --success-soft: #EAF4EE;
  --warning-soft: #FAF4E8;
  --danger-soft: #F9ECEC;
  --muted-soft: rgba(29,31,36,0.05);

  /* radius */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 14px;
  --r-xl: 16px;
  --r-2xl: 20px;
  --r-pill: 999px;

  /* spacing */
  --s-xs: 4px; --s-sm: 8px; --s-md: 12px; --s-lg: 16px; --s-xl: 24px; --s-xxl: 32px;

  /* type */
  --font: "Hanken Grotesk", "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", "Cascadia Code", "Segoe UI Mono", Menlo, monospace;
  --serif: "Fraunces", "Iowan Old Style", Georgia, serif;

  /* elevation — one soft story, no glows */
  --shadow-card: 0 1px 2px rgba(28,27,24,0.04), 0 10px 28px rgba(28,27,24,0.05);
  --shadow-pop: 0 24px 60px rgba(20,21,24,0.22);
  --shadow-nav: 0 2px 3px rgba(28,27,24,0.05), 0 12px 30px rgba(28,27,24,0.08);
  --glow-accent: 0 1px 2px rgba(0,0,0,0.16);   /* legacy name; now a crisp ink shadow */

  /* chart palette (consumed by app.js CHART + app.css) — DATA accent */
  --chart-line: #1D1F24;
  --chart-fill: rgba(29,31,36,0.07);
  --chart-band: rgba(29,31,36,0.05);
  --chart-grid: rgba(29,31,36,0.06);
  --chart-dot: #1D1F24;
  --chart-axis: #979CA6;
  --chart-2: #3DA894;       /* second series (Explore dual-axis) */
}

/* ===== Appearance: data-accent variants (charts/rings only — chrome stays ink) ===== */
:root[data-palette="teal"] {
  --chart-line: #2E9C87; --chart-fill: rgba(46,156,135,0.10); --chart-dot: #2E9C87;
  --chart-band: rgba(46,156,135,0.08); --chart-2: #5C616B;
  --accent-2: #2E9C87;  /* ring gradient second stop picks up the data accent */
}

:root[data-palette="sand"] {
  --chart-line: #B07E2E; --chart-fill: rgba(176,126,46,0.10); --chart-dot: #B07E2E;
  --chart-band: rgba(176,126,46,0.08); --chart-2: #5C616B;
  --accent-2: #B07E2E;
}