@import url('https://fonts.googleapis.com/css2?family=Archivo+Narrow:wght@400;700&family=Fraunces:ital,wght@1,400&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  /* Colour tokens — dark theme (default) */
  --bg: #141414;
  --fg: #d4cec4;
  --accent-lime: #c0fc04;
  --accent-magenta: #ea027e;
  --accent-blue: #3601fb;
  --accent-orange: #ff5500;
  --accent-yellow: #ffd84d;
  --accent-red: #ff3333;
  --muted: #a09a8f;
  --surface: #1d1d20;
  --border: #2a2a2d;

  /* Semi-transparent tints derived from accents.
     Variable-ised so the light theme can swap them together with the
     accent hue. */
  --edit-tint: rgba(192, 252, 4, 0.04);
  --delete-tint: rgba(234, 2, 126, 0.05);
  --banner-tint: rgba(192, 252, 4, 0.06);
  /* Tint for outlined navigational/instructional buttons on hover.
     Same magenta hue as --accent-magenta but at low opacity so the
     hover reads as a faint wash, not a fill. Light/dark theme
     versions use the corresponding accent-magenta channel. */
  --instructional-tint: rgba(234, 2, 126, 0.08);
  --modal-overlay: rgba(0, 0, 0, 0.85);

  /* Font tokens */
  --font-display: 'Archivo Narrow', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-serif: 'Fraunces', Georgia, serif;

  /* Semantic entry-type tokens */
  --type-meal: var(--accent-lime);
  --type-symptom: var(--accent-magenta);
  --type-stool: var(--accent-orange);
  --type-observation: var(--accent-blue);
}

[data-theme="light"] {
  --bg: #f5f3ee;
  --fg: #1f1f1f;
  --surface: #ebe8e0;
  --border: #cec9bf;
  --muted: #6b6760;

  /* Accents darkened for readable contrast on a light background
     while remaining hue-recognisable as dots and borders. */
  --accent-lime: #4a7d00;
  --accent-magenta: #c6006a;
  --accent-blue: #2800c4;
  --accent-orange: #c44400;
  --accent-yellow: #b07a00;
  --accent-red: #b71919;

  --edit-tint: rgba(74, 125, 0, 0.06);
  --delete-tint: rgba(198, 0, 106, 0.06);
  --banner-tint: rgba(74, 125, 0, 0.08);
  --instructional-tint: rgba(198, 0, 106, 0.08);
  --modal-overlay: rgba(20, 20, 20, 0.55);
}