/** Shopify CDN: Minification failed

Line 64:0 All "@import" rules must come first

**/
/* sacra. — brand layer
 * Overrides Dawn fonts + brand tokens at :root level so the WHOLE store inherits the identity.
 * Source of truth: brand/DESIGN_SYSTEM.md + brand/tokens.css. Loaded after base.css.
 * Fonts: Satoshi (Fontshare, self-served via @font-face) + Libre Baskerville (Google).
 * NEVER edit colors here directly for marketing — color roles live in the theme color schemes
 * (config/settings_data.json). This file only wires fonts + flat/no-shadow + pill affordances. */

/* ----------------------------------------------------------------------------
 * 1. Satoshi — Fontshare CDN. Variable font covers 300–900; we map the weights
 *    Dawn asks for (regular / bold). Display swap to avoid FOIT.
 * -------------------------------------------------------------------------- */
@font-face {
  font-family: "Satoshi";
  src: url("https://api.fontshare.com/v2/fonts/satoshi/fonts/Satoshi-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("https://api.fontshare.com/v2/fonts/satoshi/fonts/Satoshi-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("https://api.fontshare.com/v2/fonts/satoshi/fonts/Satoshi-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("https://api.fontshare.com/v2/fonts/satoshi/fonts/Satoshi-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("https://api.fontshare.com/v2/fonts/satoshi/fonts/Satoshi-BoldItalic.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("https://api.fontshare.com/v2/fonts/satoshi/fonts/Satoshi-Black.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* ----------------------------------------------------------------------------
 * 2. Libre Baskerville — Google Fonts (editorial / quotes / cata cards).
 *    Pulled via @import so we self-contain the stack in one asset.
 * -------------------------------------------------------------------------- */
@import url("https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap");

/* ----------------------------------------------------------------------------
 * 3. Override Dawn's font CSS variables so EVERY component (headings, body, UI,
 *    buttons, cart, drawers, forms) renders in the sacra. typography.
 *    Dawn sets these from the font_picker in theme.liquid :root — we win by
 *    cascade order (this file loads after base.css and the inline :root block).
 * -------------------------------------------------------------------------- */
:root {
  --font-heading-family: "Satoshi", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-heading-style: normal;
  --font-heading-weight: 700;

  --font-body-family: "Satoshi", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body-style: normal;
  --font-body-weight: 400;
  --font-body-weight-bold: 700;

  /* Brand tokens mirrored from brand/tokens.css for use in custom sections. */
  --sacra-volt: #e2fc66;
  --sacra-volt-soft: #eefdab;
  --sacra-bone: #efe9df;
  --sacra-bone-2: #f4f0e9;
  --sacra-bone-3: #faf8f4;
  --sacra-black: #000000;
  --sacra-gray-900: #111111;
  --sacra-serif: "Libre Baskerville", Baskerville, Georgia, serif;
  --sacra-display: "Satoshi Black", "Satoshi", system-ui, sans-serif;
  --sacra-marker: "Bakso Sapi", "Permanent Marker", cursive;

  /* Page margins / container (art-direction §5) */
  --sacra-page-x: clamp(20px, 5vw, 80px);
  --sacra-max: 1280px;
}

/* Headings tighten tracking and lean bold/black, per the manual's compact titling. */
h1, h2, .h0, .h1, .h2 {
  letter-spacing: -0.02em;
}

/* ----------------------------------------------------------------------------
 * 4. Flat editorial — buttons NEVER carry a shadow (transversal house-rule),
 *    pill radius, and the volt CTA hover tint. The color (volt bg + black label)
 *    comes from the color schemes; here we only enforce shape + hover + no-shadow.
 * -------------------------------------------------------------------------- */
.button,
.shopify-payment-button__button--unbranded,
.button--primary,
.button--secondary {
  box-shadow: none !important;
  border-radius: var(--radius-pill, 999px);
}
:root {
  --radius-pill: 999px;
}

/* Hover tint for the primary (volt) button: lift toward volt-soft without a shadow. */
.button:not([disabled]):hover::after,
.button:not([disabled]):focus-visible::after {
  box-shadow: none !important;
}
.button--primary:not([disabled]):hover,
.shopify-payment-button__button--unbranded:not([disabled]):hover {
  background-color: var(--sacra-volt-soft);
}

/* Editorial serif utility for quotes / manifesto / cata notes (used in hito 2). */
.sacra-serif,
blockquote {
  font-family: var(--sacra-serif);
}

/* ----------------------------------------------------------------------------
 * 5. Wordmark fallback — while the real `sacra.` SVG logo isn't uploaded, the
 *    header renders the shop name as TEXT. Render it brand-correct: lowercase,
 *    tight tracking, bold Satoshi. PLACEHOLDER until brand/ ships the logo SVG.
 *    (We do NOT inject the trailing period via CSS to avoid coupling to the
 *    store's shop-name string; that comes with the real wordmark asset.)
 * -------------------------------------------------------------------------- */
.header__heading-link .h2,
.header__heading-link {
  text-transform: lowercase;
  letter-spacing: -0.03em;
  font-weight: 700;
}
