/* ============================================================
   Hailo Digital Hub — Foundations
   Colors + Typography tokens. Import this and you have the
   look & feel scaffolding for any Hailo surface.

   Source of truth: reference/Brandbook-Entwurf-1.pdf (Farben,
   Typographie, Größenverhältnisse) + the live marketing site
   (h16b.com) + the Smart Waste Dashboard product screens.
   ============================================================ */

/* ─── Web fonts ───────────────────────────────────────────── */
@font-face {
  font-family: "Lato";
  src: url("fonts/Lato-Thin.ttf") format("truetype");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lato";
  src: url("fonts/Lato-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lato";
  src: url("fonts/Lato-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Work Sans";
  src: url("fonts/WorkSans-Variable.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Work Sans";
  src: url("fonts/WorkSans-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ─── Brand color palette (from Brandbook p.29) ─────────── */
  --hailo-red:        #ED1C24;  /* Leuchtendrot — logo dot, accents, alerts */
  --hailo-red-hover:  #C9151C;  /* darker red — hover state on red surfaces */
  --hailo-red-soft:   #FCE8E9;  /* pale red — table-zebra, hover surface */

  --hailo-cyan:       #009EC4;  /* Himmelblau — secondary accent, data viz */
  --hailo-cyan-soft:  #E5F4F8;

  --graphite:         rgba(38, 38, 38, 0.8);  /* Grafitgrau — updated per brand feedback */
  --graphite-solid:   #525252;                /* fully-opaque equivalent over white */
  --graphite-deep:    #262626;                /* darker graphite for emphasis */

  /* Neutrals — light-grey-mixed-with-white per the user brief */
  --black:            #000000;  /* Schwarz — headers, on-dark surfaces */
  --neutral-950:      #0E0F10;  /* near-black, slight warmth */
  --neutral-900:      #1A1B1C;  /* dark grey — footer / secondary chrome */
  --neutral-700:      #3F4548;
  --neutral-500:      #636B6E;  /* = Grafitgrau */
  --neutral-400:      #8A9094;
  --neutral-300:      #B8BDC0;
  --neutral-200:      #DEE0E3;  /* Helles Grau — borders, dividers */
  --neutral-100:      #ECEDEF;  /* card subtle bg */
  --neutral-50:       #F6F7F8;  /* page background */
  --white:            #FFFFFF;

  /* Data-viz palette (sourced from product screens) */
  --viz-organic:      #2BB673;  /* Bio / Organic */
  --viz-paper:        #29B6F6;  /* Papier */
  --viz-plastic:      #FBD400;  /* Plastik / Kunststoff */
  --viz-rest:         #000000;  /* Restmüll */
  --viz-other:        #E2843A;  /* Sonstige */
  --viz-metal:        #BFBFBF;  /* Metall */
  --viz-bar-pink:     #E48A99;  /* dashboard bar charts trend */

  /* Semantic foregrounds & surfaces */
  --fg-1:             var(--black);        /* primary text on light */
  --fg-2:             var(--graphite);     /* secondary text on light */
  --fg-3:             var(--neutral-400);  /* tertiary / placeholder */
  --fg-inv-1:         var(--white);        /* primary text on dark */
  --fg-inv-2:         #C7CACC;             /* secondary text on dark */

  --bg-page:          var(--white);
  --bg-subtle:        var(--neutral-50);
  --bg-card:          var(--white);
  --bg-chrome:        var(--black);        /* default header bg */
  --bg-chrome-soft:   var(--neutral-900);  /* footer / nested chrome */
  --bg-inv:           var(--black);

  --border-1:         var(--neutral-200);
  --border-2:         #C7CACC;
  --border-focus:     var(--hailo-red);

  --accent:           var(--hailo-red);
  --accent-fg:        var(--white);

  /* Shadows — soft & subtle; dashboard cards */
  --shadow-sm: 0 1px 2px rgba(15, 17, 18, 0.04), 0 1px 1px rgba(15, 17, 18, 0.03);
  --shadow-md: 0 4px 12px rgba(15, 17, 18, 0.06), 0 2px 4px rgba(15, 17, 18, 0.04);
  --shadow-lg: 0 12px 32px rgba(15, 17, 18, 0.10), 0 4px 8px rgba(15, 17, 18, 0.05);
  --shadow-pop: 0 16px 48px rgba(15, 17, 18, 0.18);

  /* Radii — Hailo runs a generous pill aesthetic */
  --radius-xs: 6px;     /* tiny chips */
  --radius-sm: 10px;    /* inputs */
  --radius-md: 16px;    /* cards */
  --radius-lg: 24px;    /* hero cards / sections */
  --radius-pill: 999px; /* primary buttons, tabs, sidebar item */

  /* Spacing scale (8-pt) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* Typography families */
  --font-display: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body:    "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-eyebrow: "Work Sans", "Lato", system-ui, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;

  /* Type ramp — H1 is THIN/LIGHT per brandbook ("Lato Light" / "Lato Thin") */
  --fs-display: clamp(48px, 6vw, 84px);
  --fs-h1: clamp(36px, 4.4vw, 60px);
  --fs-h2: clamp(28px, 3vw, 40px);
  --fs-h3: 24px;
  --fs-h4: 20px;
  --fs-body-lg: 18px;
  --fs-body:    16px;
  --fs-body-sm: 14px;
  --fs-caption: 12px;
  --fs-eyebrow: 13px;

  --lh-tight: 1.05;
  --lh-snug:  1.18;
  --lh-base:  1.5;
  --lh-loose: 1.65;

  /* Eyebrow letter-spacing — brandbook calls for ~80pt tracking on caps */
  --ls-eyebrow: 0.16em;
  --ls-tight: -0.02em;
}

/* ─── Semantic element styles ─────────────────────────────── */
html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  color: var(--fg-1);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.h-display {
  font-family: var(--font-display);
  font-weight: 100;          /* Lato Thin — biggest, most editorial */
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
}
h1, .h1 {
  font-family: var(--font-display);
  font-weight: 300;          /* Lato Light — canonical H1 (per brandbook) */
  font-size: var(--fs-h1);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
  text-wrap: balance;
  margin: 0 0 var(--space-4);
}
/* Headlines in Hailo content end with a period (".") — see brandbook claims */

h2, .h2 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
  text-wrap: balance;
  margin: 0 0 var(--space-3);
}
h3, .h3 {
  font-family: var(--font-display);
  font-weight: 400;          /* Lato Regular for sub-heads */
  font-size: var(--fs-h3);
  line-height: 1.25;
  margin: 0 0 var(--space-2);
}
h4, .h4 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h4);
  line-height: 1.3;
  margin: 0 0 var(--space-2);
}

.eyebrow {
  font-family: var(--font-eyebrow);
  font-weight: 500;
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--hailo-red);
  display: inline-block;
}

p, .body { font-size: var(--fs-body); line-height: var(--lh-base); color: var(--fg-2); margin: 0 0 var(--space-3); }
.body-lg { font-size: var(--fs-body-lg); line-height: var(--lh-loose); color: var(--fg-2); }
.body-sm { font-size: var(--fs-body-sm); line-height: var(--lh-base); color: var(--fg-2); }
.caption { font-size: var(--fs-caption); line-height: 1.4; color: var(--fg-3); }

a {
  color: var(--hailo-red);
  text-decoration: none;
  transition: color 120ms ease;
}
a:hover { color: var(--hailo-red-hover); }

code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

/* ─── Surfaces ─────────────────────────────────────────────── */
.surface-dark {
  background: var(--black);
  color: var(--fg-inv-1);
}
.surface-dark h1, .surface-dark h2, .surface-dark h3, .surface-dark h4,
.surface-dark .h-display { color: var(--fg-inv-1); }
.surface-dark p, .surface-dark .body { color: var(--fg-inv-2); }

.surface-chrome { /* dark grey footer / header chrome */
  background: var(--bg-chrome-soft);
  color: var(--fg-inv-1);
}

/* ─── Utility: the Hailo dot ───────────────────────────────── */
.hailo-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  background: var(--hailo-red);
  color: var(--white);
  font-weight: 900;
  font-style: italic;
  flex: 0 0 auto;
}