/**
 * Autoprinter — embedded-app brand utilities (Tier 3 token layer).
 *
 * The embedded app renders inside Shopify's admin frame using the new
 * `<s-...>` web components. Those components carry Polaris styling and
 * we deliberately don't fight them — see brand/shopify-triage.md for the
 * full audit. This file adds a small set of NAMESPACED brand tokens +
 * utility classes for the few non-Polaris elements we control (custom
 * markup inside our own routes — IDs, timestamps, eyebrow labels, etc).
 *
 * All identifiers are prefixed `.ap-*` / `--ap-*` so they cannot
 * accidentally override Polaris classes or the host admin chrome.
 *
 * Apply by name (`<span class="ap-mono">`) or by custom prop
 * (`<span style={{ color: "var(--ap-honey-accent)" }}>`). Don't apply
 * these to Polaris/`<s-...>` web components themselves — the host
 * design system's typography wins there, and that's the right call.
 *
 * See LAUNCH-PROJECT-PLAN.md T14 Phase 5 item 1 for context.
 */

/* Geist Mono — self-hosted woff2 (mirrored from brand/fonts/). Used as
   the canonical mono face across every Autoprinter surface (Chrome
   extension popup, desktop agent UI, marketing site, welcome email, and
   now the embedded admin). Variable font covers all weights via the
   100 900 range — single file. */
@font-face {
  font-family: "Geist Mono";
  src: url("/fonts/GeistMono.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Brand honey accent. Primary use cases: small accent dots, eyebrow
     dividers, special-state highlights on custom (non-Polaris) markup.
     OKLCH form per the rest of the brand system; falls back to a
     pre-computed hex on browsers that don't support OKLCH yet (rare
     in 2026 but cheap to provide). */
  --ap-honey-accent: #DAA15A;
  --ap-honey-accent: oklch(0.72 0.16 65);

  /* A muted variant for less-prominent treatments (timestamp deltas,
     metadata, secondary labels). WCAG AA fix Apr 30 2026 — was #B98847
     (2.86:1 on cream, fails AA 4.5:1; ~3.14:1 on white, also fails).
     Darkened to #8C5A1A → 5.31:1 on cream, 5.84:1 on white. Brand
     register preserved (still warm-honey, just deeper). */
  --ap-honey-accent-soft: #8C5A1A;
  --ap-honey-accent-soft: oklch(0.48 0.13 60);

  /* Soft cream BACKGROUND fill — the canonical "honey-tinted surface"
     color from the design bundle (`--ap-honey-soft` there). Pair with
     --ap-honey-ink for text + --ap-honey-accent for the border ring.
     Used on numbered priority circles, "next step" indicators, and
     other small honey-on-cream callouts. */
  --ap-honey-bg: #F5E6CC;
  --ap-honey-bg: oklch(0.92 0.06 80);

  /* Dark warm-brown TEXT color, designed to land WCAG-AA on the
     --ap-honey-bg fill. Bundle calls this `--ap-honey-ink`. */
  --ap-honey-ink: #5A3D14;
  --ap-honey-ink: oklch(0.32 0.10 55);

  /* Warm cream paper — the canonical Autoprinter "background paper"
     surface. Same value used on marketing site, welcome email,
     install/landing page, Chrome popup, Desktop agent. Pair with
     ink (#1A1712) text. Used by hero bands, callouts, and any
     surface signaling "this is the brand's foundation paper." */
  --ap-paper: #F8F4E8;

  /* Slightly darker cream for layered paper treatments (paper-tray
     wrapping a paper-sheet, hero band gradient bottom). */
  --ap-paper-2: #F2EDDD;

  /* Cream-tinted divider color, designed to be visibly different
     from a white parent surface but still "warm." Use as the
     border on cream callouts so they have a visible edge. Bundle
     calls this `--ap-rule`. */
  --ap-rule: #E5DFCB;
}

/* Utility: Geist Mono with brand-tuned tracking + size adjust. Apply
   to spans wrapping IDs, timestamps, version numbers, eyebrow labels.
   Inherits color + size from parent so it composes cleanly with
   Polaris text styles. */
.ap-mono {
  font-family: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-feature-settings: "ss01" on, "cv11" on;
  letter-spacing: -0.005em;
  font-variant-numeric: tabular-nums;
}

/* Utility: uppercase eyebrow label treatment. Pairs naturally with
   .ap-mono on small caption-style text above section headers. */
.ap-eyebrow {
  font-family: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ap-honey-accent-soft);
}