/* ── Der blasse Schimmer — Typography ──
   Two typefaces, three voices.
   Cormorant Garamond — display serif: hooks, titles, the emotional core (often italic).
   Inter — sans: body, dynamic captions, structural labels.
   Cormorant is delicate; size it ~15-20% larger than a Playfair would be for equal weight. */

:root {
  --dbs-font-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --dbs-font-sans:  'Inter', system-ui, -apple-system, sans-serif;

  --font-display: var(--dbs-font-serif);
  --font-body:    var(--dbs-font-sans);

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

  /* ── Tracking ── */
  --tracking-tight:  -0.01em;
  --tracking-normal:  0;
  --tracking-label:   0.18em;  /* Inter caps labels */
  --tracking-eyebrow: 0.24em;  /* eyebrows, claim */

  /* ── Line heights ── */
  --leading-display: 0.98;
  --leading-title:   1.08;
  --leading-hook:    1.28;
  --leading-body:    1.7;

  /* ── Type scale — tuned for the 1080×1920 (9:16) video canvas ──
     Minimum readable on-canvas size is 28px; captions never go below 40px. */
  --fs-hero:     124px;  /* full-screen hook headline */
  --fs-title:    84px;   /* card / overlay title */
  --fs-hook:     60px;   /* italic emotional line */
  --fs-quote:    64px;   /* pull quote on dark */
  --fs-caption:  52px;   /* dynamic subtitle — Inter medium */
  --fs-body:     30px;   /* on-canvas body copy */
  --fs-product:  34px;   /* product name */
  --fs-label:    22px;   /* category label, structural caps */
  --fs-eyebrow:  20px;   /* eyebrow / kicker */
  --fs-handle:   22px;   /* @derblasseschimmer watermark */

  /* ── Reusable type roles (apply as composite custom props) ── */
}

/* ── Type role utility classes (optional helpers for static HTML) ── */
.dbs-hero {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: var(--fs-hero);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
}
.dbs-title {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: var(--fs-title);
  line-height: var(--leading-title);
  color: var(--text-primary);
}
.dbs-hook {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-style: italic;
  font-size: var(--fs-hook);
  line-height: var(--leading-hook);
  color: var(--text-primary);
}
.dbs-body {
  font-family: var(--font-body);
  font-weight: var(--fw-light);
  font-size: var(--fs-body);
  line-height: var(--leading-body);
  color: var(--text-secondary);
}
.dbs-label {
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-primary);
}
.dbs-eyebrow {
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
}