/* =========================================================================
   ETYC — Core Tokens
   Single source of truth for colors, type, spacing, radii, shadows.

   Updated to the 2026 brand refresh: Fraunces (display) + Inter (body);
   Deep Teal as the identity anchor; Coral reserved for CTA + editorial accents;
   adds Ink, Charcoal, Muted, Border to support multi-vertical surfaces.
   Legacy --green-* / --coral / --cancel-* aliases are kept so existing
   cards keep rendering — they resolve to the same hex values.
   ========================================================================= */

/* ---------- Fonts ---------- */
/* Display: Fraunces · Body: Inter — self-hosted (RGPD: no Google Fonts CDN).
   Variable fonts: one file per family covers the full weight range. */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/Fraunces-Variable.woff2") format("woff2-variations"),
       url("../fonts/Fraunces-Variable.woff2") format("woff2");
}
@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/Fraunces-Variable-Italic.woff2") format("woff2-variations"),
       url("../fonts/Fraunces-Variable-Italic.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/Inter-Variable.woff2") format("woff2-variations"),
       url("../fonts/Inter-Variable.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/Inter-Variable-Italic.woff2") format("woff2-variations"),
       url("../fonts/Inter-Variable-Italic.woff2") format("woff2");
}

/* Legacy local faces kept loaded so older cards still render
   if they explicitly request Vision / Merriweather. */
@font-face {
  font-family: "Vision";
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/Vision.otf") format("opentype");
}
@font-face {
  font-family: "Vision";
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/Vision-Bold.otf") format("opentype");
}
@font-face {
  font-family: "Vision";
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/Vision-Heavy.otf") format("opentype");
}
@font-face {
  font-family: "Merriweather";
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/Merriweather-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "Merriweather";
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/Merriweather-Bold.ttf") format("truetype");
}

/* ---------- Tokens ---------- */
:root {
  /* ----- Brand palette (the official 10) ----- */
  --color-primary:        #005F61;   /* Deep Teal — headlines, brand anchor */
  --color-primary-soft:   #00857D;   /* Teal — sublines, link hover, active state */
  --color-accent:         #6BBBAE;   /* Light Teal — alt panels, soft highlights */
  --color-accent-pale:    #B8DDE1;   /* Pale Teal — card bg, "improving" states */
  --color-cta:            #DE484F;   /* Coral — primary CTA, attention, italics */
  --color-cta-hover:      #B8333A;   /* Coral dark — CTA hover, destructive */

  --color-bg-base:        #F8FDFF;   /* Off-White — page background */
  --color-bg-dark:        #0A1F22;   /* Ink — dark hero alt, footer */

  --color-text-primary:   #1A2B2D;   /* Charcoal — body text on light */
  --color-text-muted:     #5A6F72;   /* Muted — captions, meta, breadcrumbs */
  --color-border:         #E1ECEE;   /* Border — separators, card outlines */

  /* ----- Surfaces & misc ----- */
  --color-surface:        #FFFFFF;   /* card on Off-White */
  --color-surface-muted:  var(--color-bg-base);
  --color-surface-panel:  var(--color-accent-pale);

  /* ----- Status (EMS) ----- */
  --status-completed:     var(--color-primary-soft);
  --status-inprogress:    #FFB84D;
  --status-locked:        #80A0A1;
  --status-attention:     var(--color-cta);

  /* Risk (ISO 14001) */
  --risk-low:             var(--color-primary-soft);
  --risk-medium:          var(--color-cta);
  --risk-high:            var(--color-cta-hover);

  /* Four levers — Energy · Product · Water · Waste */
  --lever-energy:         var(--color-cta);          /* coral */
  --lever-product:        var(--color-accent);       /* light teal */
  --lever-water:          var(--color-primary-soft); /* teal */
  --lever-waste:          var(--color-primary);      /* deep teal */

  /* ----- Legacy aliases (do not remove — older cards still use them) ----- */
  --green-extralighter:   var(--color-bg-base);
  --green-extralight:     var(--color-accent-pale);
  --green-light:          var(--color-accent);
  --green:                var(--color-primary-soft);
  --green-dark:           var(--color-primary);
  --green-inactive:       #80A0A1;
  --coral:                var(--color-cta);
  --coral-light:          #FF9B80;
  --salmon:               var(--color-cta);
  --orange-light:         #FF9B80;
  --orange:               #FFB84D;
  --orange-dark:          #FF8000;
  --red-light:            #E26F6F;
  --red:                  var(--color-cta);
  --red-dark:             var(--color-cta-hover);
  --white:                #FFFFFF;
  --black:                #000000;
  --ink:                  var(--color-bg-dark);
  --cancel-light:         var(--color-text-muted);
  --cancel:               var(--color-text-primary);
  --brand:                var(--color-primary);
  --brand-accent:         var(--color-primary-soft);
  --surface:              #FFFFFF;
  --surface-muted:        var(--color-bg-base);
  --surface-panel:        var(--color-accent-pale);
  --text:                 var(--color-text-primary);
  --text-muted:           var(--color-text-muted);
  --text-subtle:          var(--color-text-muted);
  --border:               var(--color-border);

  /* ----- Typography ----- */
  --font-display: "Fraunces", "Merriweather", Georgia, serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Aliases for legacy `--font-heading` references */
  --font-heading: var(--font-display);

  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  32px;
  --text-3xl:  40px;
  --text-4xl:  56px;
  --text-5xl:  72px;

  /* ----- Radii ----- */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   8px;    /* buttons, inputs */
  --radius-lg:   12px;
  --radius-xl:   16px;   /* cards */
  --radius-2xl:  24px;
  --radius-3xl:  32px;
  --radius-full: 9999px; /* badges, pills */

  /* ----- Shadows (cool teal tint, low-saturation) ----- */
  --shadow-sm: 0 1px 2px rgba(10, 31, 34, 0.05);
  --shadow-md: 0 4px 8px -2px rgba(10, 31, 34, 0.08), 0 2px 4px -2px rgba(10, 31, 34, 0.06);
  --shadow-lg: 0 12px 24px -6px rgba(10, 31, 34, 0.10), 0 4px 8px -4px rgba(10, 31, 34, 0.06);
  --shadow-xl: 0 24px 48px -12px rgba(10, 31, 34, 0.14), 0 8px 16px -8px rgba(10, 31, 34, 0.08);

  /* ----- Spacing scale (4px base rhythm) ----- */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-8:  32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-14: 56px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;
  --s-32: 128px;

  /* ----- Layout ----- */
  --container:     1280px;
  --reading-width: 720px;
  --gutter:        32px;
  --outer-padding: 48px;
}

/* ---------- Base ---------- */
html, body {
  margin: 0;
  padding: 0;
  background: var(--color-bg-base);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

* { box-sizing: border-box; }

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  color: var(--color-primary);
  font-weight: 600;
  margin: 0;
  letter-spacing: -0.01em;
  line-height: 1.15;
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color 320ms cubic-bezier(0.4, 0, 0.2, 1);
}
a:hover { color: var(--color-primary-soft); }

/* Editorial italic signature — Fraunces in italic, used for tagline highlights */
em.signature, .signature {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  color: var(--color-cta);
}

/* Eyebrow micro-cap */
.eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-cta);
}

/* Reading-width utility for body copy */
.prose { max-width: var(--reading-width); }

/* Marketing/auth background helper (kept from legacy) */
.bg-login {
  background-image: url("../assets/bg-login.png");
  background-size: cover;
  background-position: center;
}