@font-face{font-family:"Very Vogue";src:url("./fonts/VeryVogueDisplay.woff2") format("woff2");font-weight:400;font-display:swap;}
@font-face{font-family:"Kumbh Sans";src:url("./fonts/KumbhSans.ttf") format("truetype");font-weight:100 900;font-display:swap;}
/* ============================================================
   The Plastic Footprint Directory — Design Tokens
   Built on the Thriving Sustainably brand guide.
   Single source of truth for color, type, spacing, and the
   1–10 score scale. Edit here; everything downstream inherits.
   ============================================================ */

/* NOTE: @font-face is declared by each consumer (style-guide.html and the
   theme's theme.css) because the relative path to assets/fonts differs by
   location. This file holds only portable tokens. Families: "Very Vogue"
   (display), "Kumbh Sans" (sans). */

:root {
  /* ---- Brand palette (Thriving Sustainably) ---- */
  --pfd-charcoal: #242424;   /* headings / body */
  --pfd-teal:     #00675C;   /* primary brand */
  --pfd-clay:     #A67763;   /* warm accent */
  --pfd-brown:    #5D4439;    /* deep accent */
  --pfd-cream:    #F6F4ED;    /* page / surface */
  --pfd-paper:    #ffffff;
  --pfd-line:     #e3ded1;   /* hairline on cream */
  --pfd-slate:    #6f6a63;   /* muted text */

  /* Aliases used across components */
  --pfd-ink:     var(--pfd-charcoal);
  --pfd-surface: var(--pfd-cream);

  /* ---- 1–10 score ramp ----
     On-brand earthy spectrum: brand teal (best) -> brand clay
     (mid) -> earthy brick (worst). Stays in the warm, sustainable
     family while still reading good -> bad. The high end is a
     palette EXTENSION (muted brick) for danger legibility. */
  --pfd-score-1:  #00675C;   /* brand teal */
  --pfd-score-2:  #3f8478;
  --pfd-score-3:  #6e9b7e;
  --pfd-score-4:  #9dae76;
  --pfd-score-5:  #c2a878;   /* warm sand */
  --pfd-score-6:  #be8c5e;
  --pfd-score-7:  #a67763;   /* brand clay */
  --pfd-score-8:  #9a4f3c;   /* terracotta */
  --pfd-score-9:  #7e3328;   /* brick */
  --pfd-score-10: #5d1f18;   /* deep oxblood */

  /* ---- Band semantics ---- */
  --pfd-band-low:      #00675C;  /* 1–2  brand teal */
  --pfd-band-moderate: #a67763;  /* 3–6  brand clay */
  --pfd-band-high:     #7e3328;  /* 7–10 brick */

  /* ---- Typography ---- */
  --pfd-font-display: "Very Vogue", Georgia, "Times New Roman", serif;  /* page titles, hero */
  --pfd-font-sans:    "Kumbh Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* body + UI */
  --pfd-text-xs: 12px;
  --pfd-text-sm: 14px;
  --pfd-text-base: 16px;
  --pfd-text-lg: 20px;
  --pfd-text-xl: 28px;
  --pfd-text-2xl: 44px;
  --pfd-weight-regular: 400;
  --pfd-weight-bold: 700;     /* Kumbh Sans Bold for labels/subheads */
  --pfd-leading: 1.6;
  --pfd-tracking-caps: .12em; /* uppercase labels, per brand */

  /* ---- Spacing scale ---- */
  --pfd-space-1: 4px;  --pfd-space-2: 8px;  --pfd-space-3: 12px;
  --pfd-space-4: 16px; --pfd-space-6: 24px; --pfd-space-8: 32px; --pfd-space-12: 48px;

  /* ---- Radius ---- */
  --pfd-radius-sm: 4px;
  --pfd-radius-md: 8px;
  --pfd-radius-lg: 14px;
  --pfd-radius-pill: 999px;
}

/* Helper: map a score 1–10 to its ramp color via data attribute */
[data-score="1"]  { --pfd-score: var(--pfd-score-1); }
[data-score="2"]  { --pfd-score: var(--pfd-score-2); }
[data-score="3"]  { --pfd-score: var(--pfd-score-3); }
[data-score="4"]  { --pfd-score: var(--pfd-score-4); }
[data-score="5"]  { --pfd-score: var(--pfd-score-5); }
[data-score="6"]  { --pfd-score: var(--pfd-score-6); }
[data-score="7"]  { --pfd-score: var(--pfd-score-7); }
[data-score="8"]  { --pfd-score: var(--pfd-score-8); }
[data-score="9"]  { --pfd-score: var(--pfd-score-9); }
[data-score="10"] { --pfd-score: var(--pfd-score-10); }