/* PullCheck design tokens — "the digital binder"
   Source of truth for the visual identity. See DESIGN.md for rationale.
   Dark-first: :root carries the dark theme; [data-theme="light"] (or the
   .theme-light scope class, for side-by-side review) overrides. */

/* ---- real typography (v2.5): self-hosted latin variable fonts, 153KB ----
   Display: Bricolage Grotesque — character a kid trusts, numerals with a
   face. Body: Inter — the small-size workhorse. Data: JetBrains Mono —
   dotted zero, unmistakable 1/l/I (cert numbers are read aloud).
   All OFL; see fonts/LICENSES.md. System stacks remain as fallback. */
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("fonts/bricolage.woff2") format("woff2");
  font-weight: 400 800; font-display: swap;
  unicode-range: U+0000-00FF, U+2013-2014, U+2018-201D, U+2022, U+2026;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/inter.woff2") format("woff2");
  font-weight: 400 700; font-display: swap;
  unicode-range: U+0000-00FF, U+2013-2014, U+2018-201D, U+2022, U+2026;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/jetbrains.woff2") format("woff2");
  font-weight: 400 700; font-display: swap;
  unicode-range: U+0000-00FF, U+2013-2014, U+2018-201D, U+2022, U+2026;
}

:root {
  /* ---- canvas + surfaces (dark: night sleeve) ---- */
  --canvas: #0B1120;          /* deep blue-black, never pure black */
  --surface: #121A2B;         /* card / tile */
  --raised: #182338;          /* elevated tile, input wells */
  --line: #24314A;            /* hairline on dark */
  --line-soft: #1B2539;

  /* ---- text ramp (blue-biased, AA on canvas) ---- */
  --text: #EAF0F8;
  --text-2: #A6B3C6;          /* secondary */
  --text-3: #7C899C;          /* muted: captions >= 13px only */

  /* ---- accent: Prism (the spectrum at rest) ---- */
  --accent: #2FCDBE;
  --accent-ink: #04211D;      /* text ON accent fills */
  --accent-soft: #10322F;     /* tint wells */
  --accent-soft-ink: #8FE7DC; /* text on the tint */

  /* ---- semantics ---- */
  --ok: #57C784;      --ok-soft: #12301F;   --ok-ink: #A9E9C3;
  --warn: #DFA54B;    --warn-soft: #33270F; --warn-ink: #F0D29A;
  --danger: #E2685F;  /* errors only; never paired with white circles */

  /* ---- the holo moment (see DESIGN.md §2 — three events only) ---- */
  --holo: linear-gradient(115deg,
    #6FE7D4 0%, #7FB5FF 22%, #B79CFF 45%,
    #FF9FCB 68%, #FFDF8E 88%, #6FE7D4 100%);

  /* ---- type: three roles, real faces (v2.5) ---- */
  --font-display: "Bricolage Grotesque", "Avenir Next", ui-rounded,
    -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", -apple-system, "SF Pro Text", "Segoe UI",
    Roboto, Helvetica, sans-serif;
  --font-data: "JetBrains Mono", ui-monospace, "SF Mono", Menlo,
    Consolas, monospace;

  /* rem-based so OS Dynamic Type flows through (html stays at 100%).
     Line-heights are unitless multipliers, tokenized with their size. */
  --fs-display: 1.75rem;   --lh-display: 1.15;  /* 28 — screen titles */
  --fs-title: 1.375rem;    --lh-title: 1.2;     /* 22 */
  --fs-body: 1.0625rem;    --lh-body: 1.45;     /* 17 */
  --fs-sub: 0.9375rem;     --lh-sub: 1.4;       /* 15 */
  --fs-caption: 0.8125rem; --lh-caption: 1.35;  /* 13 */
  --fs-micro: 0.6875rem;   --lh-micro: 1.3;     /* 11 — provenance, ghosts */
  /* mono roles: every price/count/cert uses these, always tabular */
  --fs-mono-price: 1.0625rem;
  --fs-mono-prov: 0.6875rem;

  /* ---- space (4-pt) + radius ---- */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 40px;
  --r-control: 12px;       /* buttons, inputs, chips */
  --r-card: 16px;          /* tiles, sheets */
  --r-art: 10px;           /* card art at standard size (~4.8% of 208px) */
  --r-art-mini: 6px;       /* card art in lists */
  --r-pill: 999px;

  /* ---- motion (v2 token system — see DESIGN.md v2.2) ----
     THE RULE: springs are for things that happen to CARDS (lock-seat,
     pocket-check); ease-out is for things that happen to SCREENS
     (transitions, fades, fans). A screen never bounces; a card never
     glides. */
  --mo-instant: 120ms;     /* state feedback: checks, chips, fades */
  --mo-standard: 200ms;    /* transitions, the lock seat */
  --mo-deliberate: 320ms;  /* page-level movement */
  --ease-card: cubic-bezier(.3, 1.46, .55, 1);   /* ONE overshoot, settles */
  --ease-screen: cubic-bezier(.2, .7, .3, 1);

  /* v1 aliases (existing call sites; new work uses the v2 names) */
  --dur-fast: var(--mo-instant);
  --dur-base: 180ms;
  --dur-slow: 240ms;
  --ease: var(--ease-screen);
  --ease-spring: var(--ease-card);

  /* ---- touch + focus ---- */
  --tap-min: 44px;
  --tap-primary: 56px;     /* oversized primary — kid thumbs */
  --focus-ring: 0 0 0 2px var(--canvas), 0 0 0 4px var(--accent);

  color-scheme: dark;
}

/* Light theme: table light. First-class, not an inversion. */
[data-theme="light"], .theme-light {
  --canvas: #F3F6FA;
  --surface: #FFFFFF;
  --raised: #FFFFFF;
  --line: #D9E1EB;
  --line-soft: #E7EDF4;

  --text: #131A24;
  --text-2: #46556A;
  --text-3: #6B7889;        /* 4.5:1 on canvas — AA at caption size */

  --accent: #0A7A6F;        /* Deep prism: same hue, sunk for AA on paper */
  --accent-ink: #FFFFFF;
  --accent-soft: #D9F0EC;
  --accent-soft-ink: #07514A;

  --ok: #1F7A46;      --ok-soft: #DCF2E4;  --ok-ink: #14532D;
  --warn: #8A5E10;    --warn-soft: #F6E8CB; --warn-ink: #6B4A0F;
  --danger: #B3362C;

  --focus-ring: 0 0 0 2px var(--canvas), 0 0 0 4px var(--accent);
  color-scheme: light;
}

/* OS preference honored when no explicit choice was stamped */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --canvas: #F3F6FA; --surface: #FFFFFF; --raised: #FFFFFF;
    --line: #D9E1EB; --line-soft: #E7EDF4;
    --text: #131A24; --text-2: #46556A; --text-3: #6B7889;
    --accent: #0A7A6F; --accent-ink: #FFFFFF;
    --accent-soft: #D9F0EC; --accent-soft-ink: #07514A;
    --ok: #1F7A46; --ok-soft: #DCF2E4; --ok-ink: #14532D;
    --warn: #8A5E10; --warn-soft: #F6E8CB; --warn-ink: #6B4A0F;
    --danger: #B3362C;
    color-scheme: light;
  }
}

/* ---- token-level effects ---- */

/* The holo sheen: background-position only (GPU-cheap). Three events only. */
.holo {
  background-image: var(--holo);
  background-size: 220% 220%;
  animation: holo-sheen 6s linear infinite;
}
@keyframes holo-sheen {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* Scan success: the one spring in the system.
   haptic: iOS UINotificationFeedbackGenerator(.success) fired with this class */
.fx-scan-success {
  animation: fx-pop var(--dur-slow) var(--ease-spring);
}
@keyframes fx-pop {
  0% { transform: scale(.92); opacity: .6; }
  100% { transform: scale(1); opacity: 1; }
}

/* Skeleton loading — never a spinner */
.skeleton {
  position: relative;
  overflow: hidden;
  background: var(--raised);
  border-radius: var(--r-control);
}
.skeleton::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 30%,
    rgba(255, 255, 255, .07) 50%, transparent 70%);
  animation: skeleton-slide 1.2s var(--ease) infinite;  /* patient, not urgent */
}
.theme-light .skeleton::after,
[data-theme="light"] .skeleton::after {
  background: linear-gradient(100deg, transparent 30%,
    rgba(19, 26, 36, .06) 50%, transparent 70%);
}
@keyframes skeleton-slide {
  from { transform: translateX(-100%); }
  to { transform: translateX(100%); }
}

@media (prefers-reduced-motion: reduce) {
  .holo { animation: none; background-position: 35% 50%; }
  .fx-scan-success { animation: none; }
  .skeleton::after { animation: none; opacity: 0; }
  * { transition-duration: 1ms !important; }
}