/* =========================================================
   Kleintierpraxis Cremlingen — Colors & Type
   Designed for waiting-room TV slides (16:9, displayed at distance)
   and supporting print/web materials.
   ========================================================= */

/* ---------- Web Fonts (Google Fonts) ---------- */
/* Barlow — versatile humanist sans, slightly condensed.
   Used for both display and body across the system, varied by weight. */
@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@300;400;500;600;700;800&family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&display=swap');

:root {
  /* ============ COLOR — BRAND ============ */
  /* Primary: a warm, calming teal — common in vet/medical visual language,
     evokes cleanliness without feeling sterile.
     Aligned to the brand teal pulled from kleintierpraxis-cremlingen.de
     (meta-theme-color: #149384). */
  --brand-teal-50:  #e8f6f3;
  --brand-teal-100: #c6ebe4;
  --brand-teal-200: #8ed8c9;
  --brand-teal-300: #4dc1ad;
  --brand-teal-400: #21a692;
  --brand-teal-500: #149384;   /* core brand — matches website */
  --brand-teal-600: #0f7c6f;
  --brand-teal-700: #0b6258;
  --brand-teal-800: #084841;
  --brand-teal-900: #04302b;

  /* Secondary: a soft, warm sand — for friendliness, contrast, "fellige" warmth.
     Pairs with teal in classic vet branding. */
  --brand-sand-50:  #fdf8f1;
  --brand-sand-100: #faeed9;
  --brand-sand-200: #f3dcb0;
  --brand-sand-300: #e8c178;
  --brand-sand-400: #d9a24a;
  --brand-sand-500: #b8822f;

  /* Accent: a muted coral — used sparingly for emphasis (emergency notes, hearts) */
  --brand-coral-300: #f4a89a;
  --brand-coral-500: #d96b58;
  --brand-coral-700: #9c4434;

  /* ============ COLOR — NEUTRALS ============ */
  --neutral-0:    #ffffff;
  --neutral-25:   #fbfaf7;   /* warm off-white — the canonical bg */
  --neutral-50:   #f6f4ef;
  --neutral-100:  #ecebe6;
  --neutral-200:  #d9d6cd;
  --neutral-300:  #b8b4a8;
  --neutral-400:  #8e8a7d;
  --neutral-500:  #6b6859;
  --neutral-600:  #4d4b40;
  --neutral-700:  #36352d;
  --neutral-800:  #25241f;
  --neutral-900:  #161612;

  /* ============ COLOR — SEMANTIC ============ */
  --bg:            var(--neutral-25);
  --bg-elevated:   var(--neutral-0);
  --bg-inverse:    var(--brand-teal-800);
  --bg-muted:      var(--neutral-50);

  --fg-1:          var(--neutral-800);   /* primary text */
  --fg-2:          var(--neutral-600);   /* secondary */
  --fg-3:          var(--neutral-500);   /* tertiary, captions */
  --fg-on-brand:   var(--neutral-25);
  --fg-on-dark:    var(--neutral-25);

  --line:          var(--neutral-200);
  --line-strong:   var(--neutral-300);

  --primary:       var(--brand-teal-500);
  --primary-hover: var(--brand-teal-600);
  --primary-soft:  var(--brand-teal-50);

  --accent:        var(--brand-sand-400);
  --emphasis:      var(--brand-coral-500);

  --success:       #4f9b6e;
  --warning:       #d9a24a;
  --danger:        #c14c3a;
  --info:          var(--brand-teal-500);

  /* ============ TYPE — FAMILIES ============ */
  --font-display: 'Barlow', -apple-system, 'Segoe UI', system-ui, sans-serif;
  --font-body:    'Barlow', -apple-system, 'Segoe UI', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* ============ TYPE — SCALE (TV-friendly) ============ */
  /* Sized assuming the design canvas is 1920×1080 at 1:1 px.
     Scale skews large — slides are read from across a waiting room. */
  --fs-hero:    144px;
  --fs-display: 96px;
  --fs-h1:      72px;
  --fs-h2:      56px;
  --fs-h3:      40px;
  --fs-h4:      32px;
  --fs-body-lg: 32px;
  --fs-body:    26px;
  --fs-caption: 22px;
  --fs-eyebrow: 20px;

  /* Web-friendly fallback scale (UI / docs) */
  --fs-web-h1:  48px;
  --fs-web-h2:  36px;
  --fs-web-h3:  24px;
  --fs-web-body:16px;

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

  --ls-tight:   -0.02em;
  --ls-normal:  0;
  --ls-eyebrow: 0.18em;

  /* ============ SPACING ============ */
  --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;

  /* ============ RADII ============ */
  --r-sm:    6px;
  --r-md:    12px;
  --r-lg:    20px;
  --r-xl:    32px;
  --r-pill:  999px;

  /* ============ SHADOWS / ELEVATION ============ */
  --shadow-sm: 0 1px 2px rgba(22,22,18,0.04), 0 1px 3px rgba(22,22,18,0.06);
  --shadow-md: 0 2px 6px rgba(22,22,18,0.05), 0 8px 20px rgba(22,22,18,0.08);
  --shadow-lg: 0 6px 16px rgba(22,22,18,0.07), 0 24px 48px rgba(22,22,18,0.10);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.7);

  /* ============ MOTION ============ */
  --ease-standard: cubic-bezier(.2,.7,.2,1);
  --ease-soft:     cubic-bezier(.4,.0,.2,1);
  --dur-fast:      160ms;
  --dur-base:      280ms;
  --dur-slow:      520ms;

  /* TV slide transitions are slow & calm */
  --dur-slide:     900ms;
}

/* ============ SEMANTIC TYPE STYLES ============ */
.k-hero,
.k-display,
.k-h1, .k-h2, .k-h3, .k-h4 {
  font-family: var(--font-display);
  color: var(--fg-1);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-tight);
  font-weight: 500;
  text-wrap: pretty;
  margin: 0;
}
.k-hero    { font-size: var(--fs-hero);    font-weight: 600; }
.k-display { font-size: var(--fs-display); font-weight: 500; }
.k-h1      { font-size: var(--fs-h1);      font-weight: 500; line-height: var(--lh-snug); }
.k-h2      { font-size: var(--fs-h2);      font-weight: 500; line-height: var(--lh-snug); }
.k-h3      { font-size: var(--fs-h3);      font-weight: 600; line-height: var(--lh-snug); }
.k-h4      { font-size: var(--fs-h4);      font-weight: 600; line-height: var(--lh-snug); }

.k-body-lg, .k-body, .k-caption, .k-eyebrow {
  font-family: var(--font-body);
  color: var(--fg-1);
  margin: 0;
}
.k-body-lg { font-size: var(--fs-body-lg); line-height: var(--lh-relaxed); font-weight: 400; }
.k-body    { font-size: var(--fs-body);    line-height: var(--lh-relaxed); font-weight: 400; color: var(--fg-2); }
.k-caption { font-size: var(--fs-caption); line-height: var(--lh-normal);  font-weight: 500; color: var(--fg-3); }

.k-eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--primary);
}

/* Optical italic for the warm display feel — Fraunces opsz */
.k-italic { font-style: italic; }