/* EcoKlima Montage — design tokens
   Drop into the Django static CSS entry point. Everything below is used by the
   HTML design references in ./design_files/. Values are final (hi-fi). */

:root {
  /* ---- Colour: brand ---- */
  --c-navy:            #0D2845; /* identity navy — large flat fields, header/footer */
  --c-navy-hover:      #14375C;
  --c-navy-active:     #081B2F;
  --c-navy-line:       #24425F; /* hairlines on navy */
  --c-navy-ink-muted:  #C6D4E0; /* body text on navy (12.0:1 vs navy) */
  --c-navy-label:      #8FB8CF; /* monospace labels on navy (6.4:1) */

  --c-green:           #33B54A; /* identity green — accent rules, focus ring; NOT a bed for white text (2.7:1) */
  --c-green-hover:     #43C95A; /* hover ON navy */
  --c-green-dark:      #237F36; /* primary button fill, hover on white, green-as-text (5.1:1 on white) */
  --c-green-active:    #1C6B2C; /* primary button hover (6.6:1 on white) */
  --c-green-deep:      #155423; /* primary button pressed (9.0:1 on white) */
  --c-green-tint:      #EDF6EE;
  --c-green-tint-2:    #F4F9F5;

  /* ---- Colour: semantic ---- */
  --c-surface:         #FFFFFF;
  --c-surface-raised:  #F4F6F8;
  --c-surface-sunken:  #FAFBFC;
  --c-surface-invers:  var(--c-navy);
  --c-ink:             #16232E; /* 14.2:1 on white */
  --c-ink-strong:      var(--c-navy);
  --c-ink-muted:       #5A6670; /* 6.1:1 on white — smallest allowed muted */
  --c-ink-disabled:    #7C8A94;
  --c-border:          #DDE3E8;
  --c-border-strong:   #C3CDD6; /* form field borders, 3:1 UI contrast */
  --c-border-subtle:   #EDF1F4;

  --c-accent:          var(--c-green);
  --c-accent-ink:      #FFFFFF; /* text on --c-accent */
  --c-success:         #237F36;
  --c-success-bg:      #EDF6EE;
  --c-error:           #B3261E; /* 6.0:1 on white */
  --c-error-bg:        #FCEEED;
  --c-info:            var(--c-navy);
  --c-info-bg:         #EAF0F5;

  /* Placeholder state — content the client has NOT confirmed.
     Must stay visibly a placeholder. Never ship these in production. */
  --c-placeholder-ink:    #8A6100;
  --c-placeholder-bg:     #FDF7E7;
  --c-placeholder-border: #B8891F; /* always rendered 1px dashed */

  /* ---- Typography ----
     Two self-hosted woff2 families, four weights total.
     --font-display: technical grotesk, 600/700, used >= 24px only
     --font-text:    highly legible text face, 400/700
     Monospace labels use the SYSTEM mono — not shipped, zero bytes. */
  --font-display: "EcoKlima Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-text:    "EcoKlima Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --fs-display-1: 52px; /* H1 homepage      — mobile 31px */
  --fs-display-2: 46px; /* H1 subpages      — mobile 31px */
  --fs-h2:        36px; /* section heading  — mobile 24px */
  --fs-h3:        21px; /* card/block title — mobile 19px */
  --fs-body-lg:   19px; /* intro, hero sub  — mobile 17px */
  --fs-body:      17px; /* body             — mobile 16px MINIMUM */
  --fs-small:     15px;
  --fs-fine:      14px;
  --fs-label:     11px; /* mono, uppercase, letter-spacing .22em */
  --fs-label-sm:  10px;

  --lh-tight:  1.1;   /* display */
  --lh-snug:   1.35;  /* card titles */
  --lh-body:   1.65;
  --lh-long:   1.75;  /* long-form German service copy */
  --ls-display: -0.025em;
  --ls-h2:      -0.02em;
  --ls-label:    0.22em;
  --measure:    70ch; /* 60–75 characters */

  /* ---- Spacing ---- */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 20px;  --space-6: 26px;  --space-7: 34px;  --space-8: 48px;
  --space-9: 64px;  --space-10: 88px;

  /* ---- Layout ---- */
  --container:        1240px;
  --container-narrow: 1080px; /* campaign landing pages */
  --gutter:           40px;   /* mobile 20px */
  --header-h:         88px;   /* desktop; mobile 56px */
  --stickybar-h:      64px;   /* mobile only */

  /* ---- Radii, shadows, focus ---- */
  --radius:       3px;
  --radius-badge: 2px;
  --shadow-1: 0 1px 2px rgba(13, 40, 69, 0.08);
  --shadow-2: 0 8px 24px rgba(13, 40, 69, 0.12);
  --focus-ring:        3px solid var(--c-green);
  --focus-ring-invers: 3px solid #FFFFFF; /* on green fills */
  --focus-offset:      2px;

  --tap-min: 44px;

  /* ---- Breakpoints (for reference; use in media queries) ---- */
  --bp-s: 640px;   /* 1-col -> 2-col grids */
  --bp-m: 900px;   /* section rhythm, sticky bar off */
  --bp-l: 1120px;  /* full 4-col grids, sidebars appear */

  /* The header's own breakpoint: below this the mobile bar and its panel are
     the navigation, above it the desktop row is.

     Declared here and read back by site.js (getComputedStyle on :root), so the
     script's media query and the CSS that hides the panel cannot drift apart.
     They did: the CSS switched the header at 1220px while the script watched
     --bp-m at 900px, so opening the menu at, say, 1024px and widening to
     1280px crossed the CSS boundary without ever firing the script's change
     handler. The panel went display:none while the DOM still held it open and
     the body stayed scroll-locked -- a frozen page with no visible control to
     recover it.

     --bp-m is deliberately NOT this value. It is a content-rhythm breakpoint
     used by sections and the sticky bar; its comment used to claim the nav
     switch too, which is what made the mismatch look intentional. */
  --bp-header: 1220px;
}

/* Global focus token — never leave to the browser default */
:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
  border-radius: var(--radius-badge);
}

html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-text);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-ink);
  background: var(--c-surface);
  -webkit-font-smoothing: antialiased;
}
[lang="de"] { hyphens: auto; } /* long compounds */
h1, h2, h3 { font-family: var(--font-display); text-wrap: pretty; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}