/* =========================================================
   Orientierungsstark – Hundeverhalten
   Core color & type tokens
   Brand spec (from source doc):
     "Farben der Homepage: black / warmgray 5 / Rot 485 / Weiss"
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@300;400;500;600;700&family=Source+Serif+4:ital,wght@0,400;0,600;1,400&display=swap');

:root {
  /* -----------------------------------------------------
     COLORS · primitives
     ----------------------------------------------------- */

  /* Brand */
  --os-red-485:        #DA291C;          /* Pantone 485 C */
  --os-red-485-dark:   #B0200F;          /* press / hover */
  --os-red-485-soft:   #F4D9D5;          /* tints, surfaces */

  --os-black:          #111111;          /* near-black, body */
  --os-ink:            #1F1F1F;          /* second ink */
  --os-white:          #FFFFFF;

  /* Pantone Warm Gray scale, anchored on Warm Gray 5 */
  --os-warmgray-1:     #EAE6E2;
  --os-warmgray-2:     #D9D2CB;
  --os-warmgray-3:     #C9BFB6;
  --os-warmgray-4:     #BCB1A7;
  --os-warmgray-5:     #B2A8A2;          /* spec'd accent neutral */
  --os-warmgray-6:     #9C928C;
  --os-warmgray-7:     #7A6F69;
  --os-warmgray-8:     #5A514C;
  --os-warmgray-9:     #3C3531;

  /* Off-whites for paper / page backgrounds */
  --os-paper:          #FAF8F6;          /* warm off-white */
  --os-paper-2:        #F2EEE9;          /* slightly deeper */

  /* -----------------------------------------------------
     COLORS · semantic
     ----------------------------------------------------- */
  --fg-1:              var(--os-black);          /* primary text */
  --fg-2:              var(--os-warmgray-8);     /* secondary text */
  --fg-3:              var(--os-warmgray-7);     /* muted */
  --fg-on-dark:        var(--os-white);
  --fg-on-red:         var(--os-white);

  --bg-page:           var(--os-paper);
  --bg-surface:        var(--os-white);
  --bg-surface-2:      var(--os-paper-2);
  --bg-inverse:        var(--os-black);
  --bg-accent:         var(--os-red-485);
  --bg-accent-soft:    var(--os-red-485-soft);

  --border-1:          var(--os-warmgray-2);     /* hairlines */
  --border-2:          var(--os-warmgray-4);     /* stronger */
  --border-strong:     var(--os-black);

  --link:              var(--os-red-485);
  --link-hover:        var(--os-red-485-dark);

  /* -----------------------------------------------------
     TYPE · families
     Logo uses a humanist sans; Source Sans 3 is the closest
     free match. Long-form copy uses Source Serif 4 for a
     warm, calm reading rhythm appropriate to the tone.
     ----------------------------------------------------- */
  --font-sans:   "Source Sans 3", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-serif:  "Source Serif 4", "Iowan Old Style", Georgia, serif;
  --font-display: var(--font-sans);

  /* Weights */
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* Type scale (rem; root = 16px) */
  --fs-xs:       0.75rem;     /* 12 */
  --fs-sm:       0.875rem;    /* 14 */
  --fs-base:     1rem;        /* 16 */
  --fs-md:       1.125rem;    /* 18 */
  --fs-lg:       1.375rem;    /* 22 */
  --fs-xl:       1.75rem;     /* 28 */
  --fs-2xl:      2.25rem;     /* 36 */
  --fs-3xl:      3rem;        /* 48 */
  --fs-4xl:      4rem;        /* 64 */

  --lh-tight:    1.15;
  --lh-snug:     1.3;
  --lh-normal:   1.55;
  --lh-relaxed:  1.7;

  --tracking-tight:  -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-eyebrow: 0.18em;

  /* -----------------------------------------------------
     SPACING / RADII / SHADOWS / MOTION
     ----------------------------------------------------- */
  --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;
  --space-10: 128px;

  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(17,17,17,0.06);
  --shadow-md: 0 6px 18px rgba(17,17,17,0.08);
  --shadow-lg: 0 18px 40px rgba(17,17,17,0.12);

  --ease-standard: cubic-bezier(0.2, 0.6, 0.2, 1);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:      150ms;
  --dur-base:      220ms;
  --dur-slow:      400ms;

  --container:     1200px;
}

/* =========================================================
   Semantic element styles · apply via class on demos / docs
   ========================================================= */

.os-page {
  background: var(--bg-page);
  color: var(--fg-1);
  font-family: var(--font-serif);
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.os-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--os-red-485);
}

.os-h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: clamp(2.25rem, 4.5vw, var(--fs-4xl));
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  margin: 0 0 var(--space-4);
}
/* Brand mark: split-weight wordmark, gray "Orientierungs" + red "stark" */
.os-h1 .accent { color: var(--os-red-485); font-weight: var(--fw-bold); }

.os-h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: clamp(1.75rem, 3vw, var(--fs-2xl));
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  margin: 0 0 var(--space-3);
}

.os-h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  margin: 0 0 var(--space-3);
}

.os-h4 {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  margin: 0 0 var(--space-2);
}

.os-lead {
  font-family: var(--font-serif);
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
}

.os-p {
  font-family: var(--font-serif);
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--fg-1);
  margin: 0 0 var(--space-4);
  text-wrap: pretty;
  max-width: 68ch;
}

.os-small {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  color: var(--fg-2);
}

.os-meta {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-3);
}

.os-divider {
  height: 1px;
  background: var(--border-1);
  border: 0;
  margin: var(--space-6) 0;
}

.os-divider-red {
  height: 2px;
  width: 48px;
  background: var(--os-red-485);
  border: 0;
  margin: var(--space-3) 0 var(--space-5);
}