/* ==========================================================================
   QuickFileTools – Design Tokens
   Spec: docs/strategy-audit.md §4 Revision 2 ("the desk")
   ========================================================================== */

/* --------------------------------------------------------------------------
   Font Declarations: Atkinson Hyperlegible Next + Arial fallback
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("/fonts/atkinson-hyperlegible-next-latin-wght.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Atkinson Hyperlegible Next Fallback";
  src: local("Arial");
  font-weight: 100 900;
  font-style: normal;
  size-adjust: 104%;
  ascent-override: 95%;
  descent-override: 25%;
  line-gap-override: 0%;
}

/* --------------------------------------------------------------------------
   Light Theme Tokens (:root)
   -------------------------------------------------------------------------- */
:root {
  /* Colours */
  --paper: #f6f7f5;
  --bg: #f6f7f5;
  --sheet: #ffffff;
  --ink: #18212b;
  --ink-muted: #55606d;
  --action: #1d4ed8;
  --on-action: #ffffff;
  --marker: #ffe066;
  --on-marker: #18212b;
  --rule: #7a8592;
  --hairline: #dde1e6;
  --ok: #1a7f4b;
  --warn: #9a5b00;
  --error: #c62828;
  --organize: #6d4fd8;
  --on-organize: #ffffff;
  --checker-a: #ffffff;
  --checker-b: #e6e8ec;

  /* Elevation: one elevated sheet in light mode */
  --elevation-sheet: 0 1px 2px rgb(24 33 43 / 0.06), 0 8px 24px rgb(24 33 43 / 0.06);

  /* Typography */
  --font-sans: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible Next Fallback", Arial, sans-serif;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-h3: 1.25rem;
  --font-size-h2: 1.5625rem;
  --font-size-h1: clamp(1.9rem, 3.6vw, 2.45rem);
  --line-height-body: 1.6;
  --line-height-heading: 1.15;
  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --font-weight-heading: 760;
  --max-measure: 70ch;
  --max-content: 1120px;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  /* Shape & Radius */
  --radius-control: 6px;
  --radius-sheet: 10px;
}

/* --------------------------------------------------------------------------
   Dark Theme Tokens ([data-theme="dark"])
   -------------------------------------------------------------------------- */
[data-theme="dark"] {
  --paper: #11151b;
  --bg: #11151b;
  --sheet: #1a2029;
  --ink: #e8ecf1;
  --ink-muted: #a6b0bd;
  --action: #8fb3ff;
  --on-action: #11151b;
  --marker: #f5d547;
  --on-marker: #18212b;
  --rule: #6b7684;
  --hairline: #2a313c;
  --ok: #5fd39a;
  --warn: #ffb84d;
  --error: #ff7a7a;
  --organize: #b9a6ff;
  --on-organize: #11151b;
  --checker-a: #262c36;
  --checker-b: #1f242d;

  /* Elevation: in dark mode, flat with hairline border and no shadow */
  --elevation-sheet: none;
}

body {
  margin: 0;
}

html,
body {
  background-color: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
}

html[data-theme="dark"],
[data-theme="dark"] body,
html[data-theme="dark"] body {
  background-color: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
}