/* Vigyaniq design tokens — the single source for colour, type, shape and space.
   Page stylesheets should use these variables instead of literal values.
   One theme, dark (owner, 2026-10-09: "We only support dark theme as default"): ink outlines on night graph
   paper, whatever the device setting. */
:root{
  color-scheme:dark;

  /* Colour (dark) */
  --vq-ink:#eef2f8;
  --vq-ink-muted:#a3b0c2;
  --vq-ink-subtle:#7f8ca0;
  --vq-on-ink:#101826;           /* text and icons on an ink fill */
  --vq-accent:#8fb2ff;
  --vq-accent-soft:#1e2c45;
  --vq-success:#7be0a4;
  --vq-success-soft:rgba(20,53,34,.6);
  --vq-danger:#ff9a92;
  /* Solid right/wrong marks (test results): a true red and green with a white mark */
  --vq-mark-wrong:#e5484d; --vq-mark-right:#2f9e5b; --vq-mark-on:#ffffff;
  --vq-danger-soft:rgba(64,24,22,.6);
  --vq-warning:#ffc958;          /* avatar and highlight only */
  --vq-paper:#101826;
  --vq-surface:#162033;
  --vq-surface-muted:#1b273b;
  --vq-surface-tint:#1e2c45;
  --vq-line:rgba(238,242,248,.16);
  --vq-grid:#1a2538;
  --vq-grid-strong:#2c3d5c;     /* the journey's knowledge graph (#85): the same paper, lines you can read */
  /* The board exam's answer sheet (#95, #113 owner): white paper, like the real answer book, on the dark app.
     --vq-sheet-note: Vigyaniq's own notes on the sheet (the page plan).
     The pen token: her typed answers, in blue ballpoint ink (#114). */
  --vq-sheet:#fafafa;
  --vq-sheet-ink:#1d2a3a;
  --vq-sheet-rule:#a6c0aa;
  --vq-sheet-margin:#8c3f52;
  --vq-sheet-grid:#d4f1df;
  --vq-sheet-grid-strong:#a5c6af;
  --vq-sheet-note:#2c5fd0; --vq-sheet-pen:#1e3a8a;
  --vq-scrim:rgba(0,0,0,.6);
  --vq-focus:#8fb2ff;
  --vq-bg-start:var(--vq-paper);
  --vq-bg-end:var(--vq-paper);

  /* Outline: the signature 2px ink border on cards, buttons, chips and bars */
  --vq-border-width:2px;
  --vq-border:var(--vq-border-width) solid var(--vq-ink);

  /* Type scale (6 steps) */
  --vq-font:Lexend,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --vq-text-xs:.75rem;    /* 12 — labels, chips, meta */
  --vq-text-sm:.875rem;   /* 14 — secondary text */
  --vq-text-md:1rem;      /* 16 — body, list titles */
  --vq-text-lg:1.25rem;   /* 20 — brand, section titles */
  --vq-text-xl:1.75rem;   /* 28 — page titles */
  --vq-text-2xl:2.25rem;  /* 36 — hero / onboarding only */
  /* Every size above follows the phone's font size setting (owner, 2026-10-09: an 80+ grandfather couldn't read
     the text; society-quest/font-scaling.test.mjs). The top bar and the heroes keep their default size (owner, same
     day: "Headers, heros are fine"): these grow no larger than at the default setting. */
  --vq-text-header:min(1.25rem,20px);    /* top bar: the app name or page title */
  --vq-text-header-sm:min(.875rem,14px); /* top bar: tagline and text buttons */
  --vq-text-header-xs:min(.75rem,12px);  /* top bar's small labels, bottom tab bar */
  --vq-text-hero:min(1.75rem,28px);      /* page heroes (h1) */
  --vq-text-hero-lg:min(2.25rem,36px);   /* onboarding heroes */
  --vq-font-hand:Kalam,"Segoe Print","Bradley Hand",cursive; /* typed answers as handwriting (#114, owner; lab-exam.css @font-face) */
  --vq-text-hand:1.375rem; /* 22: handwriting a line tall on the answer sheet (#114) */
  --vq-text-sheet-margin:1.15cqw; /* the answer sheet's margin label (#115): scales with the page, as in the book */
  --vq-text-sheet-number:1.25cqw; /* the answer sheet's page number (#117): 0.9cqw tall digits in the 2025 book */
  --vq-weight-medium:500;
  --vq-weight-bold:700;
  --vq-tracking-tight:-.03em;

  /* Shape */
  --vq-radius-sm:10px;   /* inputs, buttons, options */
  --vq-radius-md:12px;   /* cards, list rows */
  --vq-radius-lg:16px;   /* sheets, large panels */
  --vq-radius-pill:999px;
  --vq-shadow-float:0 8px 24px rgba(0,0,0,.5); /* a card floating over the page: the toast (toast.js) */

  /* Space (4px base) */
  --vq-space-1:4px;
  --vq-space-2:8px;
  --vq-space-3:12px;
  --vq-space-4:16px;
  --vq-space-5:24px;
  --vq-space-6:32px;
  --vq-gutter:16px;      /* page side padding, everywhere */
  --vq-grid-size:24px;   /* graph-paper square */

  /* Layout */
  --vq-header-height:54px;
  --vq-tap:44px;         /* minimum touch target */
  --vq-button-height:52px; /* every main button (consistency check in tools/student-tester.mjs) */
  /* Breakpoints (for reference; CSS vars can't be used in @media):
     compact < 480px, regular 480–650px, wide >= 651px */

  /* Legacy aliases — keep existing page CSS working while it migrates. */
  --app-ink:var(--vq-ink);
  --app-leaf:var(--vq-accent);
  --app-sun:var(--vq-warning);
  --app-bg-start:var(--vq-bg-start);
  --app-bg-end:var(--vq-bg-end);
  --font-ui:var(--vq-font);
}

/* iOS Larger Text (Dynamic Type): Safari scales rem only when the root takes the system body font; the app's own
   font family comes back straight after. Android's Font size reaches rem through the browser on its own. */
@supports (font:-apple-system-body){
  html{font:-apple-system-body;font-family:var(--vq-font)}
}