/* ==========================================================
   Qtarang — design tokens (build spec §2.1–2.3)
   Light mode only. Warm editorial: cream paper, deep ink,
   copper + violet accents, square corners, hairlines.
   ========================================================== */

:root {
  /* surfaces */
  --q-cream:      #F4EFE6;  /* page background */
  --q-paper:      #FAF7F1;  /* raised panels, form backgrounds */
  --q-line:       #D9D3C6;  /* hairline borders and dividers */

  /* ink */
  --q-ink:        #161A2C;  /* headings, dark sections, footer */
  --q-ink-80:     #2C3146;  /* body text */
  --q-ink-60:     #4A4F65;  /* secondary text */
  --q-slate:      #8A8FA3;  /* meta text, dates (large/decorative only) */
  --q-on-ink:     #F5F1E8;  /* text on dark sections */

  /* accents */
  --q-copper:     #A85A3C;  /* primary accent: numbers, italic emphasis */
  --q-copper-700: #7E3F28;  /* accent text on light backgrounds (AA) */
  --q-copper-50:  #F6E6DE;
  --q-violet:     #5B4A7A;  /* card top borders, diagrams */
  --q-violet-600: #463A5E;
  --q-violet-200: #B7AECC;
  --q-violet-50:  #EDEAF2;  /* tinted card backgrounds */

  /* photonic highlight — thin line diagrams, hover glows, accents on ink */
  --q-photon:     #C98B5E;

  /* derived */
  --q-line-on-ink: rgba(245, 241, 232, 0.2);
  --q-on-ink-70:   rgba(245, 241, 232, 0.74);

  /* type */
  --f-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --f-body: "Inter Tight", Inter, system-ui, -apple-system, "Segoe UI", sans-serif;

  --fs-h1: clamp(2.6rem, 5.5vw, 4.4rem);
  --fs-h2: clamp(2rem, 3.6vw, 2.9rem);
  --fs-h3: 1.35rem;
  --fs-body: 1.02rem;
  --fs-lede: 1.12rem;
  --fs-eyebrow: 0.78rem;
  --fs-small: 0.9rem;

  /* spacing scale: 4 8 12 16 24 32 48 64 96 128 */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;

  /* layout */
  --container: 1180px;
  --gutter: 24px;
  --section-pad: var(--s-10);
  --header-h: 76px;

  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (max-width: 900px) {
  :root { --section-pad: var(--s-9); --header-h: 68px; }
}

@media (max-width: 540px) {
  :root { --section-pad: var(--s-8); --gutter: 16px; }
}