/* ============================================================================
   Schmall Insektenschutz — Foundations: Color & Type
   A proposed brand system. Clean white canvas, single confident green accent,
   amber sub-accent for sun-protection contexts. Photography-led, soft radii,
   modest type weights, one shadow tier.
   ============================================================================ */

/* — Type. Hanken Grotesk is a SUBSTITUTE (no original brand font recoverable).
   Self-host for production; CDN import here for convenience. ---------------- */
@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&display=swap');

:root {
  /* ---- Brand & accent ---------------------------------------------------- */
  --green:           #2B7A4B;   /* Schmall Grün — the single brand voltage     */
  --green-active:    #20613A;   /* press / pointer-down                        */
  --green-soft:      #E8F2EB;   /* tint band / hover surface                   */
  --green-disabled:  #BCDCC8;   /* pale disabled fill                          */
  --amber:           #DE8A1C;   /* Sonnen-Amber — sub-accent (sun protection)  */
  --amber-active:    #C0760F;
  --amber-soft:      #FBF0DC;

  /* ---- Surface ----------------------------------------------------------- */
  --canvas:          #FFFFFF;   /* default page floor                          */
  --surface-soft:    #F6F7F4;   /* lightest fill — bands, disabled fields      */
  --surface-strong:  #EDEFEA;   /* heavier fill — icon buttons                 */
  --ink-surface:     #1F2A24;   /* dark band (footer / contrast section)       */

  /* ---- Hairlines & borders ----------------------------------------------- */
  --hairline:        #E3E6DF;   /* default 1px border tone                     */
  --hairline-soft:   #EEF0EA;   /* lighter divider                             */
  --border-strong:   #C2C7BD;   /* input outline / heavier stroke              */

  /* ---- Text -------------------------------------------------------------- */
  --ink:             #1F2A24;   /* dominant text — never pure black            */
  --body:            #3E463F;   /* long-form running text                      */
  --muted:           #6C746C;   /* sub-labels, captions, inactive              */
  --muted-soft:      #98A09A;   /* disabled link text                          */
  --on-primary:      #FFFFFF;   /* text on green / dark                         */
  --on-dark:         #F3F5F1;   /* text on the ink surface                     */
  --on-dark-muted:   #A9B2AB;

  /* ---- Semantic ---------------------------------------------------------- */
  --error:           #C0392B;
  --error-hover:     #A5301F;
  --success:         var(--green);
  --legal-link:      #2B7A4B;
  --scrim:           rgba(20, 27, 23, 0.55);

  /* ---- Type family ------------------------------------------------------- */
  --font-sans: 'Hanken Grotesk', -apple-system, system-ui, 'Segoe UI', Roboto,
               'Helvetica Neue', Arial, sans-serif;

  /* ---- Type scale (size / weight / line-height / tracking) --------------- */
  /* Display — modest weights (max 600); photography carries visual heft.     */
  --t-display-xl-size: clamp(2.6rem, 1.4rem + 4vw, 4rem);  /* hero h1 56–64    */
  --t-display-xl-weight: 600; --t-display-xl-lh: 1.04; --t-display-xl-ls: -0.02em;
  --t-display-lg-size: clamp(2rem, 1.4rem + 2vw, 2.75rem); /* section h2 44    */
  --t-display-lg-weight: 600; --t-display-lg-lh: 1.08; --t-display-lg-ls: -0.018em;
  --t-display-md-size: 1.75rem;  --t-display-md-weight: 600; --t-display-md-lh: 1.15; --t-display-md-ls: -0.012em;
  --t-title-lg-size: 1.375rem;   --t-title-lg-weight: 600; --t-title-lg-lh: 1.25; --t-title-lg-ls: -0.006em;
  --t-title-md-size: 1.125rem;   --t-title-md-weight: 600; --t-title-md-lh: 1.3;  --t-title-md-ls: 0;
  --t-title-sm-size: 1rem;       --t-title-sm-weight: 600; --t-title-sm-lh: 1.3;  --t-title-sm-ls: 0;

  /* Body */
  --t-body-lg-size: 1.125rem; --t-body-lg-weight: 400; --t-body-lg-lh: 1.6;
  --t-body-md-size: 1rem;     --t-body-md-weight: 400; --t-body-md-lh: 1.6;
  --t-body-sm-size: 0.875rem; --t-body-sm-weight: 400; --t-body-sm-lh: 1.5;

  /* Detail */
  --t-caption-size: 0.8125rem; --t-caption-weight: 500; --t-caption-lh: 1.3; --t-caption-ls: 0;
  --t-overline-size: 0.75rem;  --t-overline-weight: 700; --t-overline-lh: 1.2; --t-overline-ls: 0.12em; /* uppercase */
  --t-button-size: 1rem;       --t-button-weight: 600;   --t-button-lh: 1.2;

  /* ---- Spacing (4px base, 2px micro-step) -------------------------------- */
  --space-xxs: 2px;  --space-xs: 4px;  --space-sm: 8px;  --space-md: 12px;
  --space-base: 16px; --space-lg: 24px; --space-xl: 32px; --space-xxl: 48px;
  --space-section: 80px;  /* major marketing band (roomier than Airbnb's 64)  */

  /* ---- Radii (soft language, no hard corners on interactive elements) ---- */
  --r-sm: 8px;  --r-md: 14px;  --r-lg: 20px;  --r-xl: 28px;  --r-full: 999px;

  /* ---- Elevation — ONE shadow tier + flat baseline ----------------------- */
  --shadow-float: rgba(0,0,0,0.02) 0 0 0 1px, rgba(0,0,0,0.04) 0 2px 6px 0,
                  rgba(0,0,0,0.08) 0 10px 28px -6px;

  /* ---- Layout ------------------------------------------------------------ */
  --container: 1200px;
  --container-narrow: 920px;
}

/* ============================================================================
   Semantic element styles — apply on top of foundations.
   Scope to .schmall so cards/specimens opt in without leaking globally.
   ============================================================================ */
.schmall {
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.schmall h1, .schmall .h1 {
  font-size: var(--t-display-xl-size); font-weight: var(--t-display-xl-weight);
  line-height: var(--t-display-xl-lh); letter-spacing: var(--t-display-xl-ls);
  margin: 0; color: var(--ink); text-wrap: balance;
}
.schmall h2, .schmall .h2 {
  font-size: var(--t-display-lg-size); font-weight: var(--t-display-lg-weight);
  line-height: var(--t-display-lg-lh); letter-spacing: var(--t-display-lg-ls);
  margin: 0; color: var(--ink); text-wrap: balance;
}
.schmall h3, .schmall .h3 {
  font-size: var(--t-display-md-size); font-weight: var(--t-display-md-weight);
  line-height: var(--t-display-md-lh); letter-spacing: var(--t-display-md-ls);
  margin: 0; color: var(--ink);
}
.schmall h4, .schmall .h4 {
  font-size: var(--t-title-lg-size); font-weight: var(--t-title-lg-weight);
  line-height: var(--t-title-lg-lh); letter-spacing: var(--t-title-lg-ls);
  margin: 0; color: var(--ink);
}
.schmall .overline {
  font-size: var(--t-overline-size); font-weight: var(--t-overline-weight);
  line-height: var(--t-overline-lh); letter-spacing: var(--t-overline-ls);
  text-transform: uppercase; color: var(--green);
}
.schmall p, .schmall .body {
  font-size: var(--t-body-md-size); font-weight: 400;
  line-height: var(--t-body-md-lh); color: var(--body); margin: 0;
  text-wrap: pretty;
}
.schmall .lead {
  font-size: var(--t-body-lg-size); line-height: var(--t-body-lg-lh); color: var(--body);
}
.schmall .small { font-size: var(--t-body-sm-size); line-height: var(--t-body-sm-lh); }
.schmall .caption {
  font-size: var(--t-caption-size); font-weight: var(--t-caption-weight);
  line-height: var(--t-caption-lh); color: var(--muted);
}
.schmall a { color: var(--green); text-decoration: none; }
.schmall a:hover { text-decoration: underline; }