/*
 * Fahikari design tokens — the single source of truth for colour, type,
 * radius and layout variables. Loaded on every page before any other
 * Fahikari stylesheet. Document changes in docs/DESIGN_SYSTEM.md.
 *
 * Use the variable, never the raw value: var(--fh-cream-ink), not #1a2a3a.
 */

:root {
  /* Typography ------------------------------------------------------- */
  --fh-font-display: "Cinzel Decorative", "Times New Roman", Georgia, serif; /* titles */
  --fh-font-body: "Cormorant Garamond", Georgia, "Times New Roman", serif; /* reading text */
  --fh-font-ui: "Raleway", system-ui, -apple-system, "Segoe UI", sans-serif; /* UI, labels */

  /* Night shell (sidebar, topbar, page canvas) ------------------------ */
  --fh-night: #070b18;
  --fh-night-sky: #070b18;
  --fh-night-sky-deep: #050814;
  --fh-starfield: url("../img/shell/night-starfield.webp");
  --fh-shell-text: #f4f1ff;
  --fh-shell-muted: rgba(226, 232, 240, 0.68);
  --fh-shell-border: rgba(148, 163, 184, 0.16);
  --fh-shell-panel: rgba(10, 16, 36, 0.78);
  --fh-shell-panel-soft: rgba(14, 22, 48, 0.64);
  --fh-accent: #a78bfa; /* violet: links and highlights on night */
  --fh-accent-strong: #c4b5fd;

  /* Cream content surfaces (cards, panels, forms) --------------------- */
  --fh-cream: #fcf8f0; /* card background */
  --fh-cream-soft: #f3e8d8; /* pills, ghost buttons, media wells */
  --fh-cream-deep: #e8d5bf;
  --fh-cream-ink: #1a2a3a; /* text on cream */
  --fh-cream-muted: rgba(26, 42, 58, 0.72); /* secondary text on cream */
  --fh-cream-line: rgba(26, 42, 58, 0.1); /* hairlines, card borders */
  --fh-cream-gold: #d6b48a; /* section titles on night, ornaments */
  --fh-cream-navy: #1e3a5f; /* primary buttons */
  --fh-cta-grad: linear-gradient(90deg, #1e3a5f 0%, #274a73 100%);
  --fh-cream-radius: 1.25rem;
  --fh-cream-radius-sm: 0.95rem;

  /* Accessibility ----------------------------------------------------- */
  /* ≥3:1 against cream (#fcf8f0 / #f3e8d8) and against the night shell. */
  --fh-focus-ring: #a87a12;

  /* Layout -------------------------------------------------------------- */
  --fh-sidebar-width: 16rem;
  --fh-sidebar-collapsed-width: 5.25rem;
  --fh-topbar-height: 4.05rem;
  --fh-footer-height: 2.55rem;

  /* Mi Hexágono tablet (olive and coffee on the illustrated scene) */
  --fh-hex-olive: #3e5c46;
  --fh-hex-olive-deep: #314a38;
  --fh-hex-coffee: #7a4e32;
  --fh-hex-coffee-deep: #5c3a26;
  --fh-hex-sand: #f6efe4;
  --fh-hex-gold: #c4a15a;
  --fh-hex-clay: #c47a4a;
  --fh-hex-plum: #7a5a78;
}