/*==============================================================
# GW Schrott & Metallhandel (Gies Wasner) — BRAND ASSETS
#
# Single source of truth for typography and colour.
# Loaded AFTER main.css so the tokens defined here win.
#
# ── HOW TO RE-BRAND ───────────────────────────────────────────
# Change --brand-green below and the whole site follows: buttons,
# links, icons, eyebrows, header, footer, form focus rings.
# Do NOT hard-code hex greens anywhere else in the stylesheets.
==============================================================*/

/*--------------------------------------------------------------
# 1. Typography — Manrope (self-hosted, variable weight 200–800)
#    Licence: SIL Open Font Licence 1.1 — see fonts/manrope/OFL.txt
--------------------------------------------------------------*/
@font-face {
  font-family: "Manrope";
  src: url("../fonts/manrope/Manrope-VariableFont_wght.ttf") format("truetype-variations"),
       url("../fonts/manrope/Manrope-VariableFont_wght.ttf") format("truetype");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* One typeface everywhere — body, headings and navigation. */
  --brand-font: "Manrope", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  --default-font: var(--brand-font);
  --heading-font: var(--brand-font);
  --nav-font: var(--brand-font);
}

/*--------------------------------------------------------------
# 2. Colour — ONE brand green
#
# --brand-green is the only green in the identity. The -hover and
# -soft tokens below are mathematical derivations of that exact
# colour (darkened / made transparent) for interaction states and
# tinted backgrounds; they are not a second brand colour.
--------------------------------------------------------------*/
:root {
  /* ── The green ─────────────────────────────────────────── */
  --brand-green: #5aa617;
  --brand-green-hover: color-mix(in srgb, var(--brand-green), #000 14%);
  --brand-green-soft: color-mix(in srgb, var(--brand-green), transparent 88%);
  --brand-green-line: color-mix(in srgb, var(--brand-green), transparent 72%);
  /* Lightened only for small text/icons sitting on very dark video or
     footer backgrounds, where the pure green would fall below the
     legibility threshold. Same hue, same identity. */
  --brand-green-on-dark: color-mix(in srgb, var(--brand-green), #fff 22%);

  /* ── Neutrals ──────────────────────────────────────────── */
  --brand-ink: #16241b;        /* Headings / near-black green */
  --brand-body: #3c473f;       /* Body copy */
  --brand-muted: #7c8a80;      /* Secondary copy, captions */
  --brand-paper: #f7f9f5;      /* Page background */
  --brand-paper-alt: #eef3ea;  /* Alternating section band */
  --brand-surface: #ffffff;    /* Cards */
  --brand-night: #0e1f14;      /* Footer / dark bands */
  --brand-night-2: #142a1c;    /* Dark band, one step lighter */
  --brand-white: #ffffff;

  /* ── WhatsApp (third-party brand colour, not ours) ─────── */
  --wa-green: #25d366;
  --wa-dark: #075e54;

  /* ── Shape & depth ─────────────────────────────────────── */
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 24px;
  --radius-pill: 999px;
  --shadow-sm: 0 8px 20px rgba(20, 40, 20, .08);
  --shadow-md: 0 16px 40px rgba(20, 40, 20, .14);
  --shadow-lg: 0 30px 60px rgba(20, 40, 20, .22);
  --shadow-green: 0 10px 26px color-mix(in srgb, var(--brand-green), transparent 70%);

  /* ── Liquid-glass header ───────────────────────────────── */
  --glass-bg: rgba(255, 255, 255, .58);
  --glass-bg-solid: rgba(255, 255, 255, .82);
  --glass-border: rgba(255, 255, 255, .55);
  --glass-blur: saturate(180%) blur(20px);
}

/*--------------------------------------------------------------
# 3. Wire the brand tokens into the template's colour system
#    (these variable names come from the Passion template)
--------------------------------------------------------------*/
:root {
  --background-color: var(--brand-paper);
  --default-color: var(--brand-body);
  --heading-color: var(--brand-ink);
  --surface-color: var(--brand-surface);
  --contrast-color: var(--brand-white);
  --on-accent-color: var(--brand-white);
  --silver-color: var(--brand-muted);

  /* One green — accent-color-2 is deliberately the same value so
     no second green can leak in through legacy template rules. */
  --accent-color: var(--brand-green);
  --accent-color-2: var(--brand-green);

  --nav-color: var(--brand-ink);
  --nav-hover-color: var(--brand-green);
  --nav-mobile-background-color: var(--brand-white);
  --nav-dropdown-background-color: var(--brand-white);
  --nav-dropdown-color: var(--brand-ink);
  --nav-dropdown-hover-color: var(--brand-green);
}

.light-background {
  --background-color: var(--brand-paper-alt);
  --default-color: var(--brand-body);
  --heading-color: var(--brand-ink);
  --surface-color: var(--brand-surface);
}

.dark-background {
  --background-color: var(--brand-night-2);
  --default-color: #d8e2d9;
  --heading-color: var(--brand-white);
  --surface-color: #1d3a28;
  --contrast-color: var(--brand-white);
  --accent-color: var(--brand-green-on-dark);
  --accent-color-2: var(--brand-green-on-dark);
}

/*--------------------------------------------------------------
# 4. Type scale
--------------------------------------------------------------*/
body {
  font-family: var(--brand-font);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--brand-font);
  font-weight: 800;
  letter-spacing: -.02em;
}

button, input, select, textarea, .btn {
  font-family: var(--brand-font);
}

strong, b { font-weight: 700; }