/**
 * Dawn's settings-driven :root token block, RESOLVED.
 *
 * WHY this file is hand-authored instead of generated:
 *   `layout/theme.liquid` lines 57-255 build these tokens at render time from
 *   `config/settings_data.json`. The standalone storefront has no Liquid, and
 *   the settings are frozen (the theme editor is off-limits for this phase), so
 *   every `{{ settings.x }}` is inlined here as its literal value and every
 *   colour as the `r,g,b` triplet Dawn's `rgb(var(--token))` pattern expects.
 *   Regenerating this at runtime would mean shipping a Liquid interpreter to
 *   reproduce a constant — see docs/phase2-storefront-spec.md §3.1.
 *
 * WHY it lives in public/ rather than app/styles/:
 *   `vite.config.ts` sets an ABSOLUTE `base` (https://shopify.printbere.net/)
 *   so app-proxy pages get working bundle URLs. Anything Vite processes —
 *   including `url()` targets inside CSS — inherits that prefix, which would
 *   pull this host's fonts cross-origin (fonts are CORS-restricted; only
 *   /assets/* carries the ACAO header). Files under public/ are copied to
 *   build/client/ untouched and resolve per-host. §3.2 point 3.
 *
 * Derived values that are NOT a straight copy, with their Liquid source:
 *   --color-background-contrast  `color_lighten: 50` when brightness <= 26,
 *                                `color_darken: 25` otherwise (all five
 *                                backgrounds except scheme-4 take the darken
 *                                branch). Computed in HSL, same as Shopify.
 *   --font-heading-scale         heading_scale * 1.0 / body_scale = 100/100.
 *   --buttons-radius-outset      radius + border thickness when radius > 0.
 *   --*-shadow-visible           1 when the matching opacity > 0, else 0.
 *   --spacing-sections-mobile    spacing_sections is 0, i.e. < 24, so it is
 *                                passed through rather than scaled by 0.7.
 *   --media-padding              OMITTED on purpose: `settings.media_padding`
 *                                does not exist in settings_data.json, so the
 *                                live site emits the invalid `--media-padding:
 *                                px` and the browser drops the declaration.
 *                                Nothing reads it.
 */

/* ── Self-hosted webfonts ───────────────────────────────────────────────
   The live theme pulls Inter from fonts.shopifycdn.com (theme.liquid
   `font_face`) AND from cdn.shopify.com (app/root.tsx), and Archivo from
   fonts.googleapis.com (two separate <link>s in pb-collection.liquid and
   pb-product-redesign.liquid). None of those may appear in standalone output
   (spec ground rule 5), so both families are served from /fonts/.

   The weight lists are exactly what the live pages request:
     Inter   400 (type_body_font=inter_n4), 700 (font_modify bold), 800
             (type_header_font=inter_n8)
     Archivo 400 500 600 700 800 900 + italic 400 600 700 800 900
             (the union of the two Google Fonts css2 queries)

   `font-display: swap` matches `font_face: font_display: 'swap'`. The fallback
   stacks are the ones printbere.css already hard-codes on body/headings, so a
   missing .woff2 degrades to the same text the live site shows mid-load rather
   than to a broken page. */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/Inter-400.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/Inter-700.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/fonts/Inter-800.woff2") format("woff2");
}

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/Archivo-400.woff2") format("woff2");
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/Archivo-500.woff2") format("woff2");
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/Archivo-600.woff2") format("woff2");
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/Archivo-700.woff2") format("woff2");
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/fonts/Archivo-800.woff2") format("woff2");
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("/fonts/Archivo-900.woff2") format("woff2");
}
@font-face {
  font-family: "Archivo";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/Archivo-400-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Archivo";
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/Archivo-600-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Archivo";
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/Archivo-700-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Archivo";
  font-style: italic;
  font-weight: 800;
  font-display: swap;
  src: url("/fonts/Archivo-800-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Archivo";
  font-style: italic;
  font-weight: 900;
  font-display: swap;
  src: url("/fonts/Archivo-900-italic.woff2") format("woff2");
}

/* ── Colour schemes (config/settings_data.json, preset "Default") ────────
   Dawn emits one block per scheme with `:root,` glued onto the first, so
   scheme-1 doubles as the document default. Preserved exactly. */

:root,
.color-scheme-1 {
  --color-background: 250, 246, 240;
  --gradient-background: #faf6f0;
  --color-foreground: 26, 26, 26;
  --color-background-contrast: 218, 189, 144;
  --color-shadow: 26, 26, 26;
  --color-button: 26, 26, 26;
  --color-button-text: 250, 246, 240;
  --color-secondary-button: 250, 246, 240;
  --color-secondary-button-text: 26, 26, 26;
  --color-link: 26, 26, 26;
  --color-badge-foreground: 26, 26, 26;
  --color-badge-background: 250, 246, 240;
  --color-badge-border: 26, 26, 26;
  --payment-terms-background-color: rgb(250, 246, 240);
}

.color-scheme-2 {
  --color-background: 242, 235, 223;
  --gradient-background: #f2ebdf;
  --color-foreground: 26, 26, 26;
  --color-background-contrast: 205, 178, 132;
  --color-shadow: 26, 26, 26;
  --color-button: 243, 117, 32;
  --color-button-text: 255, 255, 255;
  --color-secondary-button: 242, 235, 223;
  --color-secondary-button-text: 26, 26, 26;
  --color-link: 26, 26, 26;
  --color-badge-foreground: 26, 26, 26;
  --color-badge-background: 242, 235, 223;
  --color-badge-border: 26, 26, 26;
  --payment-terms-background-color: rgb(242, 235, 223);
}

.color-scheme-3 {
  --color-background: 243, 117, 32;
  --gradient-background: #f37520;
  --color-foreground: 255, 255, 255;
  --color-background-contrast: 140, 61, 8;
  --color-shadow: 26, 26, 26;
  --color-button: 26, 26, 26;
  --color-button-text: 255, 255, 255;
  --color-secondary-button: 243, 117, 32;
  --color-secondary-button-text: 255, 255, 255;
  --color-link: 255, 255, 255;
  --color-badge-foreground: 255, 255, 255;
  --color-badge-background: 243, 117, 32;
  --color-badge-border: 255, 255, 255;
  --payment-terms-background-color: rgb(243, 117, 32);
}

.color-scheme-4 {
  --color-background: 26, 26, 26;
  --gradient-background: #1a1a1a;
  --color-foreground: 250, 246, 240;
  --color-background-contrast: 154, 154, 154;
  --color-shadow: 0, 0, 0;
  --color-button: 243, 117, 32;
  --color-button-text: 255, 255, 255;
  --color-secondary-button: 26, 26, 26;
  --color-secondary-button-text: 250, 246, 240;
  --color-link: 250, 246, 240;
  --color-badge-foreground: 250, 246, 240;
  --color-badge-background: 26, 26, 26;
  --color-badge-border: 250, 246, 240;
  --payment-terms-background-color: rgb(26, 26, 26);
}

.color-scheme-5 {
  --color-background: 255, 255, 255;
  --gradient-background: #ffffff;
  --color-foreground: 26, 26, 26;
  --color-background-contrast: 191, 191, 191;
  --color-shadow: 26, 26, 26;
  --color-button: 243, 117, 32;
  --color-button-text: 255, 255, 255;
  --color-secondary-button: 255, 255, 255;
  --color-secondary-button-text: 26, 26, 26;
  --color-link: 26, 26, 26;
  --color-badge-foreground: 26, 26, 26;
  --color-badge-background: 255, 255, 255;
  --color-badge-border: 26, 26, 26;
  --payment-terms-background-color: rgb(255, 255, 255);
}

body,
.color-scheme-1,
.color-scheme-2,
.color-scheme-3,
.color-scheme-4,
.color-scheme-5 {
  color: rgba(var(--color-foreground), 0.75);
  background-color: rgb(var(--color-background));
}

/* ── Typography + geometry tokens ───────────────────────────────────── */

:root {
  --font-body-family: Inter, sans-serif;
  --font-body-style: normal;
  --font-body-weight: 400;
  --font-body-weight-bold: 700;

  --font-heading-family: Inter, sans-serif;
  --font-heading-style: normal;
  --font-heading-weight: 800;

  --font-body-scale: 1.0;
  --font-heading-scale: 1.0;

  --media-border-opacity: 0.05;
  --media-border-width: 1px;
  --media-radius: 0px;
  --media-shadow-opacity: 0.0;
  --media-shadow-horizontal-offset: 0px;
  --media-shadow-vertical-offset: 4px;
  --media-shadow-blur-radius: 5px;
  --media-shadow-visible: 0;

  --page-width: 130rem;
  --page-width-margin: 0rem;

  --product-card-image-padding: 0.0rem;
  --product-card-corner-radius: 1.2rem;
  --product-card-text-alignment: left;
  --product-card-border-width: 0.0rem;
  --product-card-border-opacity: 0.1;
  --product-card-shadow-opacity: 0.0;
  --product-card-shadow-visible: 0;
  --product-card-shadow-horizontal-offset: 0.0rem;
  --product-card-shadow-vertical-offset: 0.4rem;
  --product-card-shadow-blur-radius: 0.5rem;

  --collection-card-image-padding: 0.0rem;
  --collection-card-corner-radius: 0.0rem;
  --collection-card-text-alignment: left;
  --collection-card-border-width: 0.0rem;
  --collection-card-border-opacity: 0.1;
  --collection-card-shadow-opacity: 0.0;
  --collection-card-shadow-visible: 0;
  --collection-card-shadow-horizontal-offset: 0.0rem;
  --collection-card-shadow-vertical-offset: 0.4rem;
  --collection-card-shadow-blur-radius: 0.5rem;

  --blog-card-image-padding: 0.0rem;
  --blog-card-corner-radius: 0.0rem;
  --blog-card-text-alignment: left;
  --blog-card-border-width: 0.0rem;
  --blog-card-border-opacity: 0.1;
  --blog-card-shadow-opacity: 0.0;
  --blog-card-shadow-visible: 0;
  --blog-card-shadow-horizontal-offset: 0.0rem;
  --blog-card-shadow-vertical-offset: 0.4rem;
  --blog-card-shadow-blur-radius: 0.5rem;

  --badge-corner-radius: 4.0rem;

  --popup-border-width: 1px;
  --popup-border-opacity: 0.1;
  --popup-corner-radius: 0px;
  --popup-shadow-opacity: 0.05;
  --popup-shadow-horizontal-offset: 0px;
  --popup-shadow-vertical-offset: 4px;
  --popup-shadow-blur-radius: 5px;

  --drawer-border-width: 1px;
  --drawer-border-opacity: 0.1;
  --drawer-shadow-opacity: 0.0;
  --drawer-shadow-horizontal-offset: 0px;
  --drawer-shadow-vertical-offset: 4px;
  --drawer-shadow-blur-radius: 5px;

  --spacing-sections-desktop: 0px;
  --spacing-sections-mobile: 0px;

  --grid-desktop-vertical-spacing: 8px;
  --grid-desktop-horizontal-spacing: 8px;
  --grid-mobile-vertical-spacing: 4px;
  --grid-mobile-horizontal-spacing: 4px;

  --text-boxes-border-opacity: 0.1;
  --text-boxes-border-width: 0px;
  --text-boxes-radius: 0px;
  --text-boxes-shadow-opacity: 0.0;
  --text-boxes-shadow-visible: 0;
  --text-boxes-shadow-horizontal-offset: 0px;
  --text-boxes-shadow-vertical-offset: 4px;
  --text-boxes-shadow-blur-radius: 5px;

  --buttons-radius: 40px;
  --buttons-radius-outset: 42px;
  --buttons-border-width: 2px;
  --buttons-border-opacity: 1.0;
  --buttons-shadow-opacity: 0.0;
  --buttons-shadow-visible: 0;
  --buttons-shadow-horizontal-offset: 0px;
  --buttons-shadow-vertical-offset: 4px;
  --buttons-shadow-blur-radius: 5px;
  --buttons-border-offset: 0.3px;

  --inputs-radius: 10px;
  --inputs-border-width: 1px;
  --inputs-border-opacity: 0.55;
  --inputs-shadow-opacity: 0.0;
  --inputs-shadow-horizontal-offset: 0px;
  --inputs-margin-offset: 0px;
  --inputs-shadow-vertical-offset: 4px;
  --inputs-shadow-blur-radius: 5px;
  --inputs-radius-outset: 11px;

  --variant-pills-radius: 10px;
  --variant-pills-border-width: 1px;
  --variant-pills-border-opacity: 0.55;
  --variant-pills-shadow-opacity: 0.0;
  --variant-pills-shadow-horizontal-offset: 0px;
  --variant-pills-shadow-vertical-offset: 4px;
  --variant-pills-shadow-blur-radius: 5px;
}

/* ── Document reset (theme.liquid lines ~226-255) ─────────────────────
   The `grid-template-rows: auto auto 1fr auto` on <body> is load-bearing:
   it is what pins Dawn's footer to the bottom with announcement bar +
   header + main above it. The storefront shell renders exactly four
   children to match. */

*,
*::before,
*::after {
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
  font-size: calc(var(--font-body-scale) * 62.5%);
  height: 100%;
}

body {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  grid-template-columns: 100%;
  min-height: 100%;
  margin: 0;
  font-size: 1.5rem;
  letter-spacing: 0.06rem;
  line-height: calc(1 + 0.8 / var(--font-body-scale));
  font-family: var(--font-body-family);
  font-style: var(--font-body-style);
  font-weight: var(--font-body-weight);
}

@media screen and (min-width: 750px) {
  body {
    font-size: 1.6rem;
  }
}