/* ============================================================
   DiB Regionalmagazin — Colors & Type
   Brand: "Der Info-Blick" Regionalmagazin (DIB-Verlag, Eging am See)
   Design: ready. Marketing + Design (team-ready.de)
   ------------------------------------------------------------
   Colours sampled directly from the official logo page-curl.
   Typeface: Barlow family (uploaded woff2 = Regular; bold/medium
   weights supplemented from Google Fonts CDN, same family).
   ============================================================ */

/* ---- Self-hosted brand fonts (uploaded by the user) ---- */
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/barlow-v13-latin-regular.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow Semi Condensed";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/barlow-semi-condensed-v16-latin-regular.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/barlow-condensed-v13-latin-regular.woff2") format("woff2");
}

/* ---- Supplemental weights (500/600/700) from Google Fonts.
   Self-host these too once the .woff2 files are provided. ---- */
@import url("https://fonts.googleapis.com/css2?family=Barlow:wght@500;600;700&family=Barlow+Condensed:wght@500;600;700&family=Barlow+Semi+Condensed:wght@500;600;700&display=swap");

:root {
  /* ============ BRAND TEAL (from logo) ============ */
  --teal-50:  #eaf1f3;
  --teal-100: #cfe0e4;
  --teal-200: #a3c4cb;
  --teal-300: #6d929b;  /* sampled: highlight of the curl */
  --teal-400: #3a8497;
  --teal-500: #1a7287;  /* PRIMARY — sampled core teal */
  --teal-600: #125b6d;  /* sampled deep curl */
  --teal-700: #0f4a58;
  --teal-800: #13363e;  /* sampled darkest curl */
  --teal-900: #0c2228;

  /* ============ INK & NEUTRALS ============ */
  --black:    #000000;  /* logo wordmark is pure black */
  --ink:      #141414;  /* default text */
  --gray-900: #12171a;
  --gray-800: #20262a;
  --gray-700: #343a3e;
  --gray-600: #4d5358;
  --gray-500: #6e767c;
  --gray-400: #9aa1a7;
  --gray-300: #c5cace;
  --gray-200: #dee1e4;
  --gray-100: #edeef0;
  --gray-50:  #f7f8f9;
  --white:    #ffffff;

  /* ============ SEMANTIC ============ */
  --accent:        var(--teal-500);
  --accent-hover:  var(--teal-600);
  --accent-press:  var(--teal-700);
  --accent-deep:   var(--teal-800);

  --bg:            var(--white);
  --bg-muted:      var(--gray-50);
  --surface:       var(--white);
  --surface-dark:  var(--teal-800);

  --fg-1:          var(--ink);      /* primary text */
  --fg-2:          var(--gray-600); /* secondary text */
  --fg-3:          var(--gray-500); /* muted / captions */
  --fg-on-accent:  var(--white);

  --border:        var(--gray-200);
  --border-strong: var(--gray-300);
  --divider:       var(--gray-100);

  /* status (kept close to brand; used sparingly) */
  --success: #2f8f5b;
  --warning: #c9871f;
  --danger:  #c0392b;

  /* ============ TYPE FAMILIES ============ */
  --font-display: "Barlow Condensed", "Barlow", system-ui, sans-serif;     /* headlines, uppercase labels */
  --font-head:    "Barlow Semi Condensed", "Barlow", system-ui, sans-serif;/* sub-heads, stat numbers */
  --font-body:    "Barlow", system-ui, -apple-system, sans-serif;          /* body copy, UI */

  /* ============ TYPE SCALE (px @ desktop) ============ */
  --fs-display: 76px;  /* hero "Lokal. Überregional." */
  --fs-h1:      54px;
  --fs-h2:      40px;
  --fs-h3:      28px;
  --fs-h4:      21px;
  --fs-label:   14px;  /* uppercase eyebrow / nav */
  --fs-body:    18px;
  --fs-small:   15px;
  --fs-tiny:    13px;

  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-normal:  1.55;

  --tracking-label: 0.14em;  /* uppercase eyebrows / nav */
  --tracking-tight: -0.01em;

  /* ============ RADIUS / SHADOW / SPACING ============ */
  --r-sm: 3px;
  --r-md: 6px;
  --r-lg: 10px;
  --r-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(19,54,62,.08), 0 1px 1px rgba(19,54,62,.04);
  --shadow-md: 0 4px 14px rgba(19,54,62,.10);
  --shadow-lg: 0 14px 40px rgba(19,54,62,.16);

  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
  --space-9: 96px;

  --maxw: 1180px;
}

/* ============ SEMANTIC ELEMENT DEFAULTS ============ */
.dib-display {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-display);
  line-height: 1.1;
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
}
.dib-h1 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h1); line-height: var(--lh-tight); color: var(--ink); }
.dib-h2 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h2); line-height: var(--lh-snug); color: var(--ink); }
.dib-h3 { font-family: var(--font-head); font-weight: 600; font-size: var(--fs-h3); line-height: var(--lh-snug); color: var(--ink); }
.dib-h4 { font-family: var(--font-head); font-weight: 600; font-size: var(--fs-h4); line-height: var(--lh-snug); color: var(--ink); }
.dib-eyebrow {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--accent);
}
.dib-body  { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-body); line-height: var(--lh-normal); color: var(--fg-1); }
.dib-small { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-small); line-height: var(--lh-normal); color: var(--fg-2); }
.dib-tiny  { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-tiny); line-height: var(--lh-normal); color: var(--fg-3); }