/* LEVVE Design System — zusammengeführt für einen einzigen Request.
   Quelle: tokens/*.css (dort weiter pflegen und hier neu zusammenführen). */

/* ── tokens/fonts.css ── */
/* LEVVE — Satoshi (self-hosted, DSGVO Art. 44 ff. / [DSG-03]) */
@font-face {
  font-family: 'Satoshi';
  src: url('assets/fonts/Satoshi-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('assets/fonts/Satoshi-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('assets/fonts/Satoshi-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('assets/fonts/Satoshi-Black.woff2') format('woff2');
  font-weight: 900; font-style: normal; font-display: swap;
}


/* ── tokens/colors.css ── */
/* LEVVE — Color tokens (Brand Guide 2025, "Circuit-L")
   Contrast logic: Deep Teal on Sand is the primary pairing — quiet, serious,
   fitting for a climate / compliance context. No signal red/green semantics
   (would collide with risk scoring). No dark mode. */
:root {
  /* ── Brand teals ─────────────────────────────── */
  --deep-teal:   #0E2F33; /* primary: logo, headlines, buttons, dark surfaces */
  --ocean-teal:  #3D5F63; /* secondary: hover states, accents */
  --teal-deeper: #1A4A50; /* sidebar hover / promo panel */
  --teal-light:  #C5D4D5; /* light teal fill, subtle badges */
  --mist:        #A7B3B1; /* tertiary: quiet UI elements, scrollbar thumb */

  /* ── Sand neutrals (backgrounds) ─────────────── */
  --sand:        #F3EFE9; /* primary background */
  --sand-light:  #F8F5F0; /* lighter tone, cards / panels */
  --sand-deep:   #EAE4DC; /* darker sand, section surfaces */

  /* ── Ink / text ──────────────────────────────── */
  --charcoal:        #0E1111; /* body text */
  --charcoal-soft:   #3A3D3D; /* secondary text */
  --charcoal-muted:  #727878; /* tertiary text, eyebrow labels */

  /* ── Lines ───────────────────────────────────── */
  --divider: #D4CEC6; /* dividers, borders */

  /* ── Semantic aliases ────────────────────────── */
  --bg-page:        var(--sand);
  --bg-raised:      #FFFFFF;
  --bg-panel:       var(--sand-light);
  --bg-section:     var(--sand-deep);
  --surface-card:   #FFFFFF;
  --surface-inset:  var(--sand-deep);

  --text-body:      var(--charcoal);
  --text-secondary: var(--charcoal-soft);
  --text-muted:     var(--charcoal-muted);
  --text-on-teal:   var(--sand);

  --border-default: var(--divider);
  --border-strong:  var(--mist);
  --focus-ring:     rgba(61,95,99,0.12);

  --accent:         var(--deep-teal);
  --accent-hover:   var(--ocean-teal);
}


/* ── tokens/typography.css ── */
/* LEVVE — Typography tokens. Satoshi throughout; weights 400/500/700/900.
   Headings use Medium (500) with -0.01em tracking. Eyebrows are uppercase,
   0.18em tracking, Medium. Body 15px / 1.6. */
:root {
  --font-sans: 'Satoshi', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --fw-regular: 400; /* @kind font */
  --fw-medium:  500; /* @kind font */
  --fw-bold:    700; /* @kind font */
  --fw-black:   900; /* @kind font */

  /* Type scale */
  --text-eyebrow: 0.7rem;   /* 11.2px — uppercase label */
  --text-xs:   0.75rem;     /* 12px */
  --text-sm:   0.8125rem;   /* 13px */
  --text-base: 0.9375rem;   /* 15px — body */
  --text-md:   1.0625rem;   /* 17px */
  --text-lg:   1.25rem;     /* 20px */
  --text-xl:   1.5rem;      /* 24px — h2 */
  --text-2xl:  2rem;        /* 32px */
  --text-3xl:  2.5rem;      /* 40px */
  --text-4xl:  3.25rem;     /* 52px — display */

  --lh-body:  1.6;  /* @kind other */
  --lh-tight: 1.15; /* @kind other */
  --lh-snug:  1.3;  /* @kind other */

  --tracking-heading: -0.01em;
  --tracking-eyebrow: 0.18em;
}


/* ── tokens/spacing.css ── */
/* LEVVE — Spacing, radius, shadow, motion tokens.
   Radii: 6 / 10 / 14. Shadows are Deep-Teal tinted (warm), never neutral black. */
:root {
  /* Spacing scale (4px base) */
  --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;

  /* Radius */
  --radius:    6px;
  --radius-lg: 10px;
  --radius-xl: 14px;
  --radius-pill: 999px;

  /* Shadow — Deep-Teal tinted */
  --shadow:      0 1px 3px rgba(14,47,51,0.06), 0 8px 24px rgba(14,47,51,0.08);
  --shadow-lift: 0 2px 8px rgba(14,47,51,0.08), 0 20px 48px rgba(14,47,51,0.12);

  /* Motion */
  --ease-brand: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --dur-fast: 0.2s;  /* @kind other */
  --dur-base: 240ms; /* @kind other */
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ── tokens/base.css ── */
/* LEVVE — base element styles + a few brand utilities.
   Kept minimal; components style themselves via the tokens. */
* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--text-base);
  line-height: var(--lh-body);
  color: var(--text-body);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-heading);
  color: var(--text-body);
  margin: 0;
}

.eyebrow {
  font-size: var(--text-eyebrow);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Brand scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--mist);
  border-radius: 6px;
  border: 2px solid var(--sand);
}
::-webkit-scrollbar-thumb:hover { background: var(--ocean-teal); }