/* ================================================================
 * ifq-tokens.css  ·  IFQ editorial tokens
 * Generated by IFQ Design Skills  ·  © 2026 ifq.ai
 *
 * Token set for IFQ-authored editorial work. These tokens are the
 * quiet infrastructure of IFQ pages: rust ledger, warm paper, mono
 * field notes, and controlled motion. See assets/ifq-brand/BRAND-DNA.md
 * and references/ifq-brand-spec.md.
 * ================================================================ */

:root {
  /* §1 — Color · Rust Trilogy + warm neutrals */
  --ifq-accent:       #D4532B;
  --ifq-accent-deep:  #A83518;
  --ifq-accent-soft:  #FFB27A;

  --ifq-ink:          #111111;
  --ifq-graphite:     #1D1D1F;
  --ifq-muted:        #6E6A63;
  --ifq-paper:        #FAF7F2;
  --ifq-cream:        #F1EBE0;
  --ifq-hairline:     #E6DFD3;

  /* §2 — Typography · three-family system */
  --ifq-font-display: "Newsreader", "Noto Serif SC", "Songti SC", Georgia, serif;
  --ifq-font-body:    "Noto Serif SC", "Songti SC", Georgia, "Newsreader", serif;
  --ifq-font-mono:    "JetBrains Mono", "SF Mono", ui-monospace, Menlo, monospace;

  --ifq-text-xs:   11px;
  --ifq-text-sm:   13px;
  --ifq-text-base: 16px;
  --ifq-text-lg:   19px;
  --ifq-text-xl:   24px;
  --ifq-text-2xl:  32px;
  --ifq-text-3xl:  48px;
  --ifq-text-4xl:  64px;
  --ifq-text-5xl:  96px;

  /* §4 — 8-point ledger */
  --ifq-space-0:   0px;
  --ifq-space-1:   4px;
  --ifq-space-2:   8px;
  --ifq-space-3:   12px;
  --ifq-space-4:   16px;
  --ifq-space-6:   24px;
  --ifq-space-8:   32px;
  --ifq-space-12:  48px;
  --ifq-space-16:  64px;
  --ifq-space-24:  96px;
  --ifq-space-32:  128px;

  /* §5 — Motion */
  --ifq-ease:       cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ifq-ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ifq-duration-xs: 120ms;
  --ifq-duration-sm: 200ms;
  --ifq-duration-md: 400ms;
  --ifq-duration-lg: 800ms;
  --ifq-duration-xl: 1800ms;

  /* Motif — 8-point sparkle path (drop into <path d="var(--ifq-spark)"/>) */
  --ifq-spark-path: "M0 -10 L2.2 -2.2 L10 0 L2.2 2.2 L0 10 L-2.2 2.2 L-10 0 L-2.2 -2.2 Z";
}

/* Dark scheme (mirrors the rust palette on a warm ink canvas) */
@media (prefers-color-scheme: dark) {
  :root {
    --ifq-ink:        #F5EFE3;
    --ifq-graphite:   #EAE2D3;
    --ifq-muted:      #A89F91;
    --ifq-paper:      #141212;
    --ifq-cream:      #1C1916;
    --ifq-hairline:   #2A2520;
    --ifq-accent-soft:#FFB27A;
  }
}

/* Reduced motion · honor user preference */
@media (prefers-reduced-motion: reduce) {
  :root {
    --ifq-duration-xs: 0ms;
    --ifq-duration-sm: 0ms;
    --ifq-duration-md: 0ms;
    --ifq-duration-lg: 0ms;
    --ifq-duration-xl: 0ms;
  }
}

/* ------------------------------------------------------------------
 * Ready-to-use building blocks  ·  IFQ-authored defaults
 * ------------------------------------------------------------------ */

.ifq-body-base {
  font-family: var(--ifq-font-body);
  font-size: var(--ifq-text-base);
  line-height: 1.55;
  color: var(--ifq-ink);
  background: var(--ifq-paper);
  text-wrap: pretty;
  font-feature-settings: "liga", "kern", "calt";
}

.ifq-display {
  font-family: var(--ifq-font-display);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.015em;
}
.ifq-display em { font-style: italic; color: var(--ifq-accent); }

.ifq-mono { font-family: var(--ifq-font-mono); letter-spacing: 0; }

.ifq-kicker {
  font-family: var(--ifq-font-mono);
  font-size: var(--ifq-text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ifq-muted);
}

.ifq-colophon {
  font-family: var(--ifq-font-mono);
  font-size: var(--ifq-text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ifq-muted);
}

.ifq-ledger {
  border-left: 2px solid var(--ifq-accent);
  padding-left: var(--ifq-space-4);
}

.ifq-rust-rule {
  width: 2px;
  background: var(--ifq-accent);
  flex-shrink: 0;
}

.ifq-hairline {
  height: 1px;
  background: var(--ifq-hairline);
  border: 0;
}

.ifq-colophon {
  font-family: var(--ifq-font-mono);
  font-size: var(--ifq-text-xs);
  color: var(--ifq-muted);
  letter-spacing: 0.06em;
}

/* Sparkle motif as a pure CSS keyframe (no JS needed) */
@keyframes ifq-sparkle {
  0%, 100% { opacity: .25; transform: scale(.9) rotate(0deg); }
  50%      { opacity: 1;   transform: scale(1)  rotate(22deg); }
}
.ifq-spark-anim {
  color: var(--ifq-accent);
  animation: ifq-sparkle var(--ifq-duration-xl) var(--ifq-ease) infinite;
  will-change: transform, opacity;
}