/* =========================================================
   ESSE WERKS — GLOBAL TOKENS + BASE
   Ported from essewerks-demo/assets/styles.css
   Polyphony × MoTeC engineer-grade visual vocabulary.
   Color tokens are also exposed as theme editor settings;
   layout/theme.liquid renders an inline :root override block
   so merchants can edit hex values without touching code.
   ========================================================= */

/* ---------- TOKENS ---------- */
:root {
  /* Palette — defaults; overridden inline by theme.liquid from settings */
  --ew-black:    #0A0A0B;
  --ew-graphite: #161618;
  --ew-carbon:   #1F1F22;
  --ew-steel:    #3A3A40;
  --ew-aluminum: #8A8A92;
  --ew-paper:    #E8E8EA;
  --ew-white:    #FFFFFF;
  --ew-red:       #E11D2C;        /* house/brand red — canonical (UI/border/focus/large text; 4.16:1 on black) */
  --ew-red-tint:  #FF5A5A;        /* AA-safe lighter house red — ONLY for small red text on black (6.47:1). NOT a default accent. */
  --ew-redline:   var(--ew-red);  /* deprecated alias → --ew-red (kept so existing call sites resolve to one source) */
  --ew-error:    #FF3B30;          /* functional error signal — livery-independent, brighter than house red (5.58:1) */
  --ew-error-text: #FF564C;        /* small-size error text on dark/tinted panels — ≥4.91:1 on every livery card tint */
  --danger:      var(--ew-error);  /* deprecated alias → --ew-error */
  /* --ew-go (#C2FF00) RETIRED: lime buy reverted to fixed gold --ew-buy (REQ-LIME). No remaining consumers. */
  --ew-buy:      #C8A24A;          /* FIXED gold buy / add-to-cart / checkout — livery-independent (8.22:1 w/ black text). Replaces lime buy (REQ-LIME revert). */
  --ew-buy-dark: #B08B33;          /* darkened-gold buy hover (~6.1:1 w/ black text, AA) */
  --ew-amber:    #F0A030;
  --ew-green:    #1FB572;
  --ew-neon-yellow: #FFF200;      /* FIXED neon-yellow promo flag (the "NN% OFF" sale flag) — livery-independent, ~19:1 on black */
  --ew-cyan:     #2EC4D8;

  /* Typography */
  --ew-font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ew-font-mono: "JetBrains Mono", ui-monospace, "Menlo", monospace;

  /* Type scale — 1.25 ratio */
  --ew-text-xs:   12px;
  --ew-text-sm:   14px;
  --ew-text-base: 16px;
  --ew-text-md:   20px;
  --ew-text-lg:   25px;
  --ew-text-xl:   39px;
  --ew-text-2xl:  61px;
  --ew-text-3xl:  95px;

  /* Spacing — 8pt grid */
  --ew-s-1:  4px;
  --ew-s-2:  8px;
  --ew-s-3:  12px;
  --ew-s-4:  16px;
  --ew-s-5:  24px;
  --ew-s-6:  32px;
  --ew-s-7:  48px;
  --ew-s-8:  64px;
  --ew-s-9:  96px;
  --ew-s-10: 128px;
  --ew-s-11: 192px;

  /* Layout */
  --ew-max:     1440px;
  --ew-gutter:  clamp(16px, 4vw, 64px);

  /* Radius — base corner token (matches the stage-badge 2px hairline corner).
     Components currently hardcode radii; migrate them to this token over time. */
  --ew-radius:  2px;

  /* Motion */
  --ew-ease:        cubic-bezier(0.2, 0.0, 0.0, 1.0);
  --ew-ease-enter:  cubic-bezier(0.0, 0.0, 0.2, 1.0);
  --ew-dur-fast:    180ms;
  --ew-dur-base:    320ms;
  --ew-dur-slow:    620ms;

  /* Elevation — no shadows, only inset hairlines */
  --ew-elev-0: inset 0 0 0 1px var(--ew-steel);
  --ew-elev-1: inset 0 0 0 1px var(--ew-steel), inset 0 1px 0 rgba(255,255,255,0.04);
}

/* ---------- BRAND BASE (page-level) ----------
   Applied to the document so the still-mostly-Dawn pages render
   in brand colors + brand typography during early-phase work.
   Dawn's own component CSS keeps working alongside; brand sections
   (Phase 3+) will fully replace it. */
html, body {
  background: var(--ew-black);
  color: var(--ew-paper);
  font-family: var(--ew-font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Override Dawn's body/heading font tokens so its existing components
   (header, cart drawer, product page, etc.) inherit Inter without
   us having to rewrite every Dawn rule. */
:root {
  --font-body-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body-style: normal;
  --font-body-weight: 400;
  --font-body-weight-bold: 700;
  --font-heading-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-heading-style: normal;
  --font-heading-weight: 700;
}

/* =========================================================
   Brand baseline
   `<body class="gradient">` was dropped in layout/theme.liquid
   (Phase 3 commit 3af8e5e7), so the document background needs an
   explicit brand-dark fill. This is the canonical baseline now
   that every product type ships on a per-shape brand template
   (Phase 4) and no longer relies on Dawn's color-scheme shim.
   ========================================================= */
body { background: var(--ew-black); color: var(--ew-paper); }

/* Mono — tabular figures everywhere we use it */
.mono, code, kbd, pre, .ew-data {
  font-family: var(--ew-font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* Focus ring — never outline:none */
*:focus { outline: none; }
*:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}