/* ============================================================================
   BADE ZAHNTECHNIK — Design Tokens
   Colors & Type foundation. Import this file to inherit the full brand system.

   Brand DNA: a premium German dental laboratory. Warm near-black "ink",
   metallic gold monogram, silver-grey wordmark. Inscriptional Roman capitals
   (Trajan-like) paired with a calm humanist sans and an editorial serif.

   Font note: the brand's logos use a Trajan-style engraved capital and a
   humanist sans we could not source as files. The nearest Google Fonts are
   substituted below (Cinzel ≈ Trajan, Mulish ≈ the KeyProtokoll sans,
   Playfair Display for editorial serif). Flagged to the user.
   ========================================================================== */

/* Fonts are loaded via fonts.css (self-hosted, no Google CDN call) */

:root {
  /* ---- Brand core ---------------------------------------------------- */
  --ink:            #0A0A0A;   /* black — brand ground (per brand direction) */
  --gold:           #FFD030;   /* brand logo gold (per brand direction) */
  --silver:         #A8A8A6;   /* wordmark grey */

  /* ---- Gold scale (built around #FFD030) ---------------------------- */
  --gold-50:        #FFFAE6;
  --gold-100:       #FFF2C2;
  --gold-200:       #FFE894;
  --gold-300:       #FFDE63;
  --gold-400:       #FFD43F;
  --gold-500:       #FFD030;   /* = --gold (logo) */
  --gold-600:       #DBAF1E;
  --gold-700:       #A98615;
  --gold-800:       #75600F;
  /* Metallic sheen for emphasis surfaces & the framed monogram */
  --gold-metallic:  linear-gradient(150deg, #FFE988 0%, #FFD84A 26%, #FFD030 55%, #C9A21C 100%);
  --gold-hairline:  linear-gradient(90deg, transparent, #FFD030 18%, #FFE894 50%, #FFD030 82%, transparent);

  /* ---- Ink / neutral scale (near-black neutral greys) --------------- */
  --ink-900:        #0A0A0A;   /* black ground */
  --ink-800:        #141413;
  --ink-700:        #1F1F1E;
  --ink-600:        #2E2E2C;
  --ink-500:        #494947;
  --ink-400:        #74746F;
  --ink-300:        #A8A8A6;   /* = --silver */
  --ink-200:        #CACAC7;
  --ink-150:        #DEDEDB;
  --ink-100:        #ECECE8;
  --ink-50:         #F6F5F2;
  --paper:          #FAFAF7;
  --white:          #FFFFFF;

  /* ---- Semantic surfaces -------------------------------------------- */
  --bg:             var(--ink-50);
  --bg-elevated:    var(--white);
  --bg-inverse:     var(--ink-900);
  --surface-dark:   #161615;
  --surface-dark-2: #20201E;

  --fg:             #1A1A18;   /* primary text on light */
  --fg-muted:       #525250;   /* secondary text on light */
  --fg-subtle:      #7A7A75;   /* tertiary text on light */
  --fg-on-dark:     #F0EFEA;   /* primary text on black */
  --fg-on-dark-muted: #A8A8A6; /* secondary text on black */

  --line:           #E4E4E0;   /* hairline divider on light */
  --line-strong:    #CDCDC9;
  --line-on-dark:   rgba(255,255,255,0.10);
  --line-gold:      rgba(255,208,48,0.45);

  /* ---- Functional (muted to fit the premium palette) ---------------- */
  --success:        #4E7C59;
  --success-bg:     #E7EFE7;
  --warning:        #B07B17;
  --warning-bg:     #F6EBD2;
  --error:          #9B3B36;
  --error-bg:       #F3E2E0;
  --info:           #3F6478;
  --info-bg:        #E3ECF1;

  /* ---- Type families ------------------------------------------------- */
  --font-display:   'Cinzel', 'Trajan Pro', 'Times New Roman', serif;        /* inscriptional caps */
  --font-serif:     'Playfair Display', Georgia, 'Times New Roman', serif;   /* editorial serif */
  --font-sans:      'Mulish', -apple-system, 'Segoe UI', sans-serif;         /* body & UI */

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

  --leading-tight:  1.08;
  --leading-snug:   1.28;
  --leading-normal: 1.55;
  --leading-relaxed:1.7;

  --tracking-caps:  0.18em;    /* wordmark / eyebrow lockup */
  --tracking-wide:  0.06em;
  --tracking-normal:0;

  /* ---- Spacing (8px base, with 4px half-step) ----------------------- */
  --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 (restrained; brand favours sharp/square frames) -------- */
  --radius-none: 0px;
  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-lg:   8px;
  --radius-pill: 999px;

  /* ---- Elevation (soft, low-spread; never harsh) -------------------- */
  --shadow-xs:  0 1px 2px rgba(10,10,10,0.08);
  --shadow-sm:  0 2px 8px rgba(10,10,10,0.09);
  --shadow-md:  0 8px 24px rgba(10,10,10,0.13);
  --shadow-lg:  0 20px 56px rgba(10,10,10,0.20);
  --shadow-gold:0 6px 22px rgba(255,208,48,0.32);
  --inset-line: inset 0 0 0 1px var(--line);

  /* ---- Motion -------------------------------------------------------- */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:   140ms;
  --dur-base:   240ms;
  --dur-slow:   480ms;
}

/* ============================================================================
   SEMANTIC TYPE ROLES
   Use these classes (or copy the declarations) for consistent hierarchy.
   ========================================================================== */

.bzt-wordmark {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--silver);
}

.bzt-eyebrow {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--gold-600);
}

.bzt-display {            /* hero / inscriptional capitals */
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.bzt-h1 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  letter-spacing: 0.005em;
}

.bzt-h2 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
}

.bzt-h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-wide);
}

.bzt-lead {               /* intro paragraph */
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--fg-muted);
}

.bzt-body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--fg);
}

.bzt-small {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--fg-muted);
}

.bzt-caption {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-subtle);
}


/* ============================================================
   RESPONSIVE LAYOUT
   ------------------------------------------------------------
   The site uses inline (React) styles, so these mobile overrides
   use attribute selectors + !important. Strategy: tighten gutters
   on tablet, then on phones collapse every multi-column grid into
   a single column and trim oversized vertical rhythm + image heights.
   ============================================================ */

@media (max-width: 1024px) {
  .bzt-container { padding-left: 32px !important; padding-right: 32px !important; }
}

@media (max-width: 760px) {
  [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 30px !important;
  }
  .bzt-container { padding-left: 20px !important; padding-right: 20px !important; }
  section[style*="padding: 100px 0"],
  section[style*="padding: 96px 0"],
  section[style*="padding: 90px 0"],
  section[style*="padding: 84px 0"] {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
  }
  img[style*="height: 520px"],
  img[style*="height: 420px"] {
    height: 320px !important;
  }
}

@media (max-width: 460px) {
  [style*="grid-template-columns"] { gap: 24px !important; }
  .bzt-container { padding-left: 16px !important; padding-right: 16px !important; }
}