/* ============================================================================
   M3 Agriculture Technologies — Brand Tokens (canonical source of truth)
   Source: ~/projects/web-assets/brand/m3-tokens.css

   This file defines the M3 brand CONSTANTS (the 5 brand colors + font stack)
   plus a RECOMMENDED light/dark semantic mapping and a .card--feature utility.

   Sites are deployed independently (Cloudflare Pages, Python http.server, Flask),
   so this file cannot be @import-ed across project boundaries at deploy time.
   Instead, COPY this file (and ../fonts/) into each project's assets and load it
   before the site's own stylesheet. Each site keeps its own semantic layer but
   should source the brand constants and the cream/featured-card rule from here.

   Font files: ./fonts/GlacialIndifference-{Regular,Bold}.woff
   When copying into a project, adjust the @font-face url() paths to match where
   the fonts land in that project (e.g. /assets/fonts/...).
   ========================================================================== */

@font-face {
  font-family: "Glacial Indifference";
  src: url("./fonts/GlacialIndifference-Regular.woff2") format("woff2"),
       url("./fonts/GlacialIndifference-Regular.woff") format("woff");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Glacial Indifference";
  src: url("./fonts/GlacialIndifference-Bold.woff2") format("woff2"),
       url("./fonts/GlacialIndifference-Bold.woff") format("woff");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  /* ── Brand constants — the 5 M3 colors + font (DO NOT vary per site) ────── */
  --m3-cream:       #fcefd6; /* FEATURED-CARD accent only — never the page bg */
  --m3-warm-gray:   #cac8c1; /* borders / muted dividers                      */
  --m3-teal:        #2aa1aa; /* primary teal — button fills, decorative accents */
  --m3-deep-teal:   #14535e; /* headings / strong text / links (AA on light)  */
  --m3-light-blue:  #c3ecff; /* soft info callouts                            */

  --m3-font-body: "Glacial Indifference", "Avenir Next", Avenir, Helvetica, Arial, sans-serif;
}

/* ── Recommended LIGHT semantic mapping ─────────────────────────────────────
   Page background is NEUTRAL grey (#f3f4f6); cards are white; cream is reserved
   for the single featured/spotlight card per page (.card--feature). */
:root,
[data-theme="light"] {
  --bg:            #f3f4f6;          /* neutral grey page background           */
  --bg2:           #ffffff;          /* white cards / panels                   */
  --bg-feature:    var(--m3-cream);  /* cream — featured/spotlight card only   */
  --bg3:           #e9eaec;          /* subtle neutral fill / header rows      */
  --bg4:           #dde0e3;          /* neutral hover fill                     */
  --border:        #c8dfe1;          /* screwworm light-teal border (M3 standard) */
  --border2:       #e3e4e6;          /* subtle row separators                  */
  --text:          var(--m3-deep-teal);
  --text2:         #3a6470;          /* muted deep teal for labels             */
  --text3:         #5d7378;          /* muted teal-gray for captions           */
  --accent:        var(--m3-deep-teal); /* links / active (AA contrast)        */
  --accent2:       var(--m3-teal);   /* decorative secondary / button fills    */
  --info:          var(--m3-light-blue);
  --shadow:        0 1px 6px rgba(20,83,94,0.10);
  --shadow-sm:     0 1px 3px rgba(20,83,94,0.08);
}

/* ── Recommended DARK semantic mapping (unchanged from brand baseline) ─────── */
[data-theme="dark"] {
  --bg:            #0a2e34;
  --bg2:           #112d33;
  --bg-feature:    #122e33;          /* deep-teal-tinted featured card on dark */
  --bg3:           #0f2a30;
  --bg4:           #163a41;
  --border:        #1e4a52;
  --border2:       #16333a;
  --text:          #e8f7f8;
  --text2:         #8ec8cc;
  --text3:         #6a8e94;
  --accent:        #34b6c0;          /* teal brightened for contrast on dark   */
  --accent2:       var(--m3-light-blue);
  --info:          var(--m3-light-blue);
  --shadow:        0 4px 20px rgba(0,0,0,0.5);
  --shadow-sm:     0 2px 8px rgba(0,0,0,0.3);
}

/* ── Featured-card utility ──────────────────────────────────────────────────
   Cream's only home. Use on ONE spotlight card per page (primary CTA, hero
   metric, highlighted notice) — not every card, never the page surface. */
.card--feature {
  background: var(--bg-feature);
  border: 1px solid var(--border);
  border-radius: var(--radius, 10px);
  box-shadow: var(--shadow-sm);
}