/* ============================================================================
   MADIN DESIGN SYSTEM — Colors & Type foundations
   Madin Chem JSC · "make it a better place"
   Green-engine-coolant + AdBlue brand. Anchored on green #00C348 / moss #093A2D.
   ----------------------------------------------------------------------------
   FONTS — all four brand families are now self-hosted from /fonts (user-supplied):
   Zimula InkSpot Extra Bold (display), Google Sans Flex (secondary), Open Sans
   (body, roman + italic). Hanken Grotesk stays as a CDN display fallback only.
   See fonts/README.md.
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:ital,wght@0,400..800;1,400..800&display=swap');

/* Brand display face — genuine Zimula InkSpot Extra Bold (self-hosted, user-supplied) */
@font-face {
  font-family: 'Zimula InkSpot';
  src: url('fonts/ZimulaInkSpot-ExtraBoldInkSpot.woff2') format('woff2'),
       url('fonts/ZimulaInkSpot-ExtraBoldInkSpot.otf') format('opentype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
/* Secondary face — genuine Google Sans Flex variable (self-hosted, user-supplied) */
@font-face {
  font-family: 'Google Sans Flex';
  src: url('fonts/GoogleSansFlex-VariableFont_GRAD_ROND_opsz_slnt_wdth_wght.ttf') format('truetype');
  font-weight: 300 700;
  font-stretch: 75% 125%;
  font-style: normal;
  font-display: swap;
}
/* Body face — genuine Open Sans variable (self-hosted, user-supplied) */
@font-face {
  font-family: 'Open Sans';
  src: url('fonts/OpenSans-VariableFont_wdth_wght.ttf') format('truetype');
  font-weight: 300 800;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Open Sans';
  src: url('fonts/OpenSans-Italic-VariableFont_wdth_wght.ttf') format('truetype');
  font-weight: 300 800;
  font-stretch: 75% 100%;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ---- BRAND CORE (used on every product line) -------------------------- */
  --madin-green:        #00C348;   /* primary · PMS 7481 C */
  --madin-green-deep:   #00A53C;   /* pressed / darker green */
  --madin-moss:         #093A2D;   /* text, panels, deep ground · PMS 627 C */
  --madin-moss-2:       #0F4D3C;   /* lifted moss for cards on dark */
  --madin-neon:         #00F350;   /* digital accent / highlight · ≈PMS 802 C */
  --madin-mint:         #C9FFC1;   /* soft tint, fills, chips */
  --madin-mint-50:      #EAFBE6;   /* faintest green wash */
  --madin-gray:         #EEEDEE;   /* light neutral surface */
  --madin-white:        #FFFFFF;

  /* ---- COOLANT PRODUCT-LINE IDENTITY (real decal inks · by grade) ------- */
  --coolant-free: #0E8A43;   /* 0%  · eco base concentrate · deep green */
  --coolant-20:   #2BB24E;   /* 20% · −5°C  · green       (decal hero) */
  --coolant-40:   #E0731F;   /* 40% · −25°C · orange      (decal hero) */
  --coolant-50:   #E04E2A;   /* 50% · −37°C · red-orange  (decal hero) */
  --coolant-ev:   #1295D4;   /* EV  · low-κ · blue        (decal hero) */

  /* on-color text — every printed grade badge uses white ink on its colour */
  --on-free: #FFFFFF;
  --on-20:   #FFFFFF;
  --on-40:   #FFFFFF;
  --on-50:   #FFFFFF;
  --on-ev:   #FFFFFF;

  /* ---- ADBLUE / DEF PRODUCT IDENTITY (green — confirmed from product) --- */
  --adblue:      #00A94F;   /* AdBlue green — product field (PMS 7481/355 family) */
  --adblue-navy: #093A2D;   /* moss — text / edges on AdBlue green */

  /* ---- SEMANTIC SURFACES & INK ----------------------------------------- */
  --bg:            #FFFFFF;
  --bg-subtle:     #F6F8F5;   /* page wash, just-off-white green-grey */
  --surface:       #FFFFFF;
  --surface-sunk:  #EEEDEE;
  --surface-green: #00C348;   /* brand green block */
  --surface-moss:  #093A2D;   /* dark brand block */

  --fg1:  #093A2D;   /* primary ink — moss, NOT pure black */
  --fg2:  #3D5A4F;   /* secondary ink */
  --fg3:  #6E867C;   /* muted / captions */
  --fg-on-green: #093A2D;   /* ink sitting on bright green */
  --fg-on-dark:  #EAFBE6;   /* ink sitting on moss */
  --fg-inverse:  #FFFFFF;

  --line:        #DCE5DF;   /* hairline borders */
  --line-strong: #093A2D;
  --line-green:  rgba(0,195,72,0.35);

  --accent:        #00C348;
  --accent-press:  #00A53C;
  --accent-tint:   #EAFBE6;

  /* status (kept inside brand greens where possible) */
  --success: #00B74F;
  --warning: #ED8B00;
  --danger:  #DA291C;
  --info:    #00A9E0;

  /* ---- TYPE FAMILIES ---------------------------------------------------- */
  /* Display — brand: genuine Zimula InkSpot Extra Bold (self-hosted), Hanken fallback */
  --font-display: 'Zimula InkSpot', 'Hanken Grotesk', 'Google Sans Flex', system-ui, sans-serif;
  /* Secondary — headings, sub-heads, UI labels: genuine Google Sans Flex */
  --font-heading: 'Google Sans Flex', 'Hanken Grotesk', system-ui, sans-serif;
  /* Body — paragraphs & long copy: genuine Open Sans */
  --font-body:    'Open Sans', system-ui, sans-serif;
  /* Utility / condensed — labels, specs, packaging (Open Sans narrow width) */
  --font-utility: 'Open Sans', system-ui, sans-serif;

  --fw-display: 800;
  --fw-bold:    700;
  --fw-medium:  500;
  --fw-regular: 400;
  --fw-light:   300;

  /* ---- TYPE SCALE (1.25 major-third-ish, tuned) ------------------------- */
  --t-display: 4.5rem;     /* 72 — hero "MAKE IT A BETTER PLACE" */
  --t-h1:      3rem;       /* 48 */
  --t-h2:      2.25rem;    /* 36 */
  --t-h3:      1.5rem;     /* 24 */
  --t-h4:      1.25rem;    /* 20 */
  --t-body-lg: 1.125rem;   /* 18 */
  --t-body:    1rem;       /* 16 */
  --t-small:   0.875rem;   /* 14 */
  --t-caption: 0.75rem;    /* 12 */

  --lh-tight:   1.04;
  --lh-snug:    1.18;
  --lh-normal:  1.55;
  --lh-relaxed: 1.7;

  --tracking-display: -0.02em;
  --tracking-tight:   -0.01em;
  --tracking-normal:  0;
  --tracking-label:   0.08em;   /* uppercase eyebrows / spec labels */

  /* ---- RADII ------------------------------------------------------------ */
  --r-xs:   4px;
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   18px;
  --r-xl:   28px;
  --r-pill: 999px;

  /* ---- SPACING (4px base) ---------------------------------------------- */
  --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-16: 64px;
  --s-20: 80px; --s-24: 96px;

  /* ---- ELEVATION (soft, green-tinted shadows) -------------------------- */
  --shadow-sm: 0 1px 2px rgba(9,58,45,0.08), 0 1px 1px rgba(9,58,45,0.04);
  --shadow-md: 0 4px 14px rgba(9,58,45,0.10), 0 2px 6px rgba(9,58,45,0.06);
  --shadow-lg: 0 18px 40px rgba(9,58,45,0.16), 0 6px 14px rgba(9,58,45,0.08);
  --shadow-green: 0 10px 30px rgba(0,195,72,0.30);

  /* ---- MOTION ----------------------------------------------------------- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);   /* gentle ease-out */
  --ease-emph: cubic-bezier(0.34, 1.2, 0.4, 1); /* slight overshoot */
  --dur-fast: 140ms;
  --dur:      220ms;
  --dur-slow: 420ms;
}

/* ============================================================================
   SEMANTIC TYPE CLASSES  — apply directly or copy the rules
   ============================================================================ */
.t-display {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: var(--t-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  color: var(--fg1);
  text-wrap: balance;
}
.t-h1 { font-family: var(--font-display); font-weight: 800; font-size: var(--t-h1);
        line-height: var(--lh-tight); letter-spacing: var(--tracking-display); color: var(--fg1); }
.t-h2 { font-family: var(--font-heading); font-weight: 700; font-size: var(--t-h2);
        line-height: var(--lh-snug); letter-spacing: var(--tracking-tight); color: var(--fg1); }
.t-h3 { font-family: var(--font-heading); font-weight: 600; font-size: var(--t-h3);
        line-height: var(--lh-snug); color: var(--fg1); }
.t-h4 { font-family: var(--font-heading); font-weight: 600; font-size: var(--t-h4);
        line-height: var(--lh-snug); color: var(--fg1); }
.t-eyebrow {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--t-caption);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--madin-green-deep);
}
.t-body-lg { font-family: var(--font-body); font-weight: 400; font-size: var(--t-body-lg);
             line-height: var(--lh-relaxed); color: var(--fg2); }
.t-body    { font-family: var(--font-body); font-weight: 400; font-size: var(--t-body);
             line-height: var(--lh-normal); color: var(--fg2); }
.t-small   { font-family: var(--font-body); font-weight: 400; font-size: var(--t-small);
             line-height: var(--lh-normal); color: var(--fg3); }
.t-caption { font-family: var(--font-body); font-weight: 400; font-size: var(--t-caption);
             line-height: var(--lh-normal); color: var(--fg3); }
/* Utility / spec — packaging style: condensed, uppercase, tight */
.t-spec {
  font-family: var(--font-utility);
  font-weight: 700;
  font-stretch: 80%;
  font-size: var(--t-small);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--fg1);
}