/* ============================================================
   ACR WEB TOKENS
   Generated from the ACR Brand Guide §1 (color) and §2 (typography).
   Brand Guide is canonical on the Team Wiki (staff login):
   https://wiki.acr-ops.com/marketing/docs/brand/acr-brand-guide.html
   Copies in Google Drive or the vault are dated snapshots, not the
   source. Values last reconciled against the Wiki: 2026-09-14.

   This file is the single source of design values for every tool
   on the ACR web platform. Import it; don't redefine values in
   your tool. If a color you need isn't here, it isn't a brand
   color — see web-application-layer.md before adding anything.
   ============================================================ */

/* tailwind import removed: build-time directive, 404s in a plain static tool */

/* ---- Cooper Black ------------------------------------------
   ACR licenses Cooper Black directly (not via Adobe Fonts), so
   self-hosting is permitted. One canonical copy is served from
   the platform's shared asset host — point every tool at it.
   Do NOT bundle your own copy, and never substitute a Google
   Fonts lookalike because the file wasn't handy.
   ------------------------------------------------------------ */
@font-face {
  font-family: "CooperBlack";
  src: url("https://assets.acr-ops.com/fonts/cooper-black.woff2") format("woff2"),
       url("https://assets.acr-ops.com/fonts/cooper-black.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* was @theme: Tailwind-v4 directive, converted for no-build static use */
:root {
  /* ---- Brand palette (§1.1) --------------------------------
     The complete set. Eleven values, nothing else.            */
  --color-black:  #000000;
  --color-white:  #ffffff;
  --color-purple: #caa2dd;
  --color-teal:   #71dbd4;
  --color-yellow: #f6eb61;
  --color-orange: #e6a65d;
  --color-blue:   #6cace4;
  --color-red:    #ff585d;
  --color-pink:   #f99fc9;
  --color-lime:   #a4d65e;
  --color-grey:   #e0e0e0;

  /* ---- Accent roles (§1.5) ---------------------------------
     Purple is the default accent. Red and blue are the
     alternates. Teal is a secondary only — it is too light to
     lead. Every accent carries BLACK text, never white.       */
  --color-accent:           var(--color-purple);
  --color-accent-alt-1:     var(--color-red);
  --color-accent-alt-2:     var(--color-blue);
  --color-accent-secondary: var(--color-teal);
  --color-on-accent:        var(--color-black);

  /* ---- Primary action --------------------------------------
     The primary button is black with white text. This matches
     the storefront. There is no dark brand color and none
     should be invented — see the note at the bottom.          */
  --color-primary:    var(--color-black);
  --color-on-primary: var(--color-white);

  /* ---- Coffee system (§1.2, §1.3) --------------------------
     Use these whenever a tool displays coffees. Color carries
     product meaning on ACR packaging — never assign a color to
     a coffee by hand.                                          */
  --color-roast-light:  var(--color-yellow);
  --color-roast-medium: var(--color-teal);
  --color-roast-dark:   var(--color-purple);
  --color-roast-decaf:  var(--color-orange);

  --color-origin-central-america: var(--color-blue);
  --color-origin-south-america:   var(--color-pink);
  --color-origin-africa:          var(--color-red);
  --color-origin-asia:            var(--color-lime);

  --color-process-natural:      var(--color-purple);
  --color-process-honey:        var(--color-yellow);
  --color-process-experimental: var(--color-lime);

  /* ---- Functional UI (§1.6) -------------------------------- */
  --color-error:        #8b0000;
  --color-success:      #006400;
  --color-grey-light:   #f5f5f5;
  --color-grey-border:  #e6e6e6;
  --color-grey-mid:     #999999;

  /* ---- Typography (§2) -------------------------------------
     Headings are Cooper Black. Never Petrona.                 */
  --font-heading: "CooperBlack", serif;
  --font-body:    "Outfit", -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* 18px base matches the storefront's paragraph size. */
  --text-base: 1.125rem;

  /* ---- Radii ----------------------------------------------
     Verified against the live DTC theme settings, 2026-08-14. */
  --radius-button:           7px;
  --radius-button-secondary: 10px;
  --radius-card:             10px;
  --radius-input:            8px;
  --radius-pill:             40px;
}

body {
  background-color: var(--color-grey-light);
  color: var(--color-black);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.4;
  margin: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  line-height: 1.1;
}

/* ============================================================
   RETIRED — do not reintroduce
   ------------------------------------------------------------
   #017167  dark teal   Never a brand color. Spread through the
                        theme and the tools without a decision.
                        Retired 2026-08-14. If you need a dark
                        surface or a high-contrast button, use
                        black.
   Petrona              Retired as a heading font. Headings are
                        Cooper Black on every surface.
   #84f7ed / #ece8dd / #fdc656
                        Storefront theme colors that are not in
                        the brand palette. Not available to
                        tools.
   Seasonal palettes    Campaign color guides (Loud Pow, Witch
                        City, Simple Summer, Singletrack) are
                        campaign-scoped. Never promote one into
                        this file.
   ============================================================ */