/* =========================================================
   Base – variables, global utilities
   Load after reset.css
   ========================================================= */

:root {
  color-scheme: light;

  /* Colors */
  --bg: #d5cddd;
  --bg-overlay: #e8e4ed;
  --bg-overlay-mix: #c9c2d0;
  --border-subtle: #beb6c7;
  /* Table / list row divider — darker purple than --bg-overlay */
  --border-row-purple: #9d8bad;
  --fg: #333;
  --fg-strong: #000;
  --fg-inverse: #f2f2f4;
  --surface: #f3f3f5;
  --surface-alt: #e8e8ec;
  --accent: #eee;
  --border: #444;
  --muted: #999;
  /* Use --text-xs … --text-2xl only; no per-file rem sizes. */

  /* Typography scale (all font-size in CSS should use these tokens)
     xs   10px — fine print, <small>, badge counts
     sm   12px — card overlays, metadata, secondary labels
     base 14px — body default (see body { font-size })
     md   16px — emphasis / long-form
     lg   18px — subheadings
     xl   22px — section titles
     2xl  64px — page titles (max scale; 4rem @ 16px root) */
  --text-xs:   0.625rem;
  --text-sm:   0.75rem;
  --text-base: 0.875rem;
  --text-md:   1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.375rem;
  --text-2xl:  4rem;

  --input-bg: #f5f5f5;
  --admin-accent: #71449f;
  --admin-accent-soft: #ede5f4;
  --error: #c00;
  --error-bg: #ffebee;
  --warning: #8d4e11;
  --warning-bg: #f3e8da;

  /* Spacing */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 0.75rem;
  --space-lg: 1rem;
  --space-xl: 1.5rem;

  /* Rhythm: meta / related / block / section (stack depth & info level) */
  --space-rhythm-tight: var(--space-xs);
  --space-rhythm-group: var(--space-sm);
  --space-rhythm-block: var(--space-md);
  --space-rhythm-section: var(--space-lg);

  /* Fullscreen modal shell — block ×1.5 vs old 3×md; inline ×2 vs old 3×md */
  --modal-content-padding-block: calc(4.5 * var(--space-md));
  --modal-content-padding-inline: calc(6 * var(--space-md));
  --modal-content-padding-mobile-block: calc(var(--space-md) * 1.5);
  --modal-content-padding-mobile-inline: calc(var(--space-md) * 2);

  --touch: 30px;
  --radius: 999rem;
  --ease: 0.2s ease;

  /* ── Canonical responsive breakpoints (5 tiers) ──────────
     xs  0…479    — phone portrait
     sm  480…767  — phone landscape / small tablet portrait
     md  768…1023 — tablet portrait / small laptop
     lg  1024…1439— laptop / desktop
     xl  1440+    — large desktop
     Use via @media (max-width: <size>) or (min-width: <size>). */
  --bp-xs: 480px;
  --bp-sm: 768px;
  --bp-md: 1024px;
  --bp-lg: 1440px;

  /* Content width clamps — use sparingly and only on prose / forms. */
  --content-max-narrow: 32rem;   /* forms, single column copy */
  --content-max-reading: 48rem;  /* article text */
  --content-max-wide: 72rem;     /* dashboards, wide layouts */
}

@font-face {
  font-family: mad;
  font-weight: bold;
  src: url("/assets/fonts/mad-sans-fill-bold.woff2") format("woff2");
}

@media (max-width: 768px) {
  :root { --touch: 20px; }
}

html {
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  margin: 0;
  font-size: var(--text-base);
  color: var(--fg);
  overflow-x: hidden;
  overflow-y: auto;
  overflow-wrap: break-word;
  word-break: keep-all;
}

html.modal-open,
body.modal-open {
  overflow: hidden;
  overscroll-behavior: none;
}

small {
  font-size: var(--text-xs);
}

a {
  color: var(--fg);
  transition: color var(--ease);
}

a:hover,
a:focus-visible {
  text-decoration: underline;
}

/* Utilities */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}