/* ===========================================================================
   Dina's Fine Arts — Typography tokens
   ---------------------------------------------------------------------------
   Display = Bricolage Grotesque at 500 with negative letter-spacing (the warm
   display voice). Body/UI = Hanken Grotesk. Never bold display past 600 — the
   character of the face supplies warmth that heavier weight would flatten.
   Mixing display into running text (or vice versa) is a system violation.
   =========================================================================== */

:root {
  /* sizes */
  --fs-display-xl: 72px;
  --fs-display-lg: 56px;
  --fs-display-md: 40px;
  --fs-display-sm: 32px;
  --fs-title-lg: 24px;
  --fs-title-md: 18px;
  --fs-title-sm: 16px;
  --fs-body-md: 16px;
  --fs-body-sm: 14px;
  --fs-caption: 13px;
  --fs-caption-uc: 12px;
  --fs-button: 14px;
  --fs-nav: 14px;

  /* weights */
  --fw-display: 500;   /* @kind other */
  --fw-regular: 400;   /* @kind other */
  --fw-medium: 500;    /* @kind other */
  --fw-semibold: 600;  /* @kind other */

  /* line heights */
  --lh-tight: 1.0;     /* @kind other */
  --lh-display: 1.08;  /* @kind other */
  --lh-snug: 1.3;      /* @kind other */
  --lh-normal: 1.4;    /* @kind other */
  --lh-relaxed: 1.55;  /* @kind other */

  /* letter spacing */
  --ls-display-xl: -2.5px;
  --ls-display-lg: -2px;
  --ls-display-md: -1px;
  --ls-display-sm: -0.5px;
  --ls-title: -0.3px;
  --ls-none: 0;          /* @kind other */
  --ls-uppercase: 1.5px;
}

/* ----- Optional utility classes (consumers may use the vars directly) ----- */
.t-display-xl { font-family: var(--font-display); font-size: var(--fs-display-xl); font-weight: var(--fw-display); line-height: var(--lh-tight); letter-spacing: var(--ls-display-xl); color: var(--text-heading); }
.t-display-lg { font-family: var(--font-display); font-size: var(--fs-display-lg); font-weight: var(--fw-display); line-height: 1.05; letter-spacing: var(--ls-display-lg); color: var(--text-heading); }
.t-display-md { font-family: var(--font-display); font-size: var(--fs-display-md); font-weight: var(--fw-display); line-height: 1.1; letter-spacing: var(--ls-display-md); color: var(--text-heading); }
.t-display-sm { font-family: var(--font-display); font-size: var(--fs-display-sm); font-weight: var(--fw-display); line-height: 1.15; letter-spacing: var(--ls-display-sm); color: var(--text-heading); }
.t-title-lg  { font-family: var(--font-display); font-size: var(--fs-title-lg); font-weight: var(--fw-semibold); line-height: var(--lh-snug); letter-spacing: var(--ls-title); color: var(--text-heading); }
.t-title-md  { font-family: var(--font-body); font-size: var(--fs-title-md); font-weight: var(--fw-semibold); line-height: var(--lh-normal); color: var(--text-heading); }
.t-title-sm  { font-family: var(--font-body); font-size: var(--fs-title-sm); font-weight: var(--fw-semibold); line-height: var(--lh-normal); color: var(--text-heading); }
.t-body-md   { font-family: var(--font-body); font-size: var(--fs-body-md); font-weight: var(--fw-regular); line-height: var(--lh-relaxed); color: var(--text-body); }
.t-body-sm   { font-family: var(--font-body); font-size: var(--fs-body-sm); font-weight: var(--fw-regular); line-height: var(--lh-relaxed); color: var(--text-body); }
.t-caption   { font-family: var(--font-body); font-size: var(--fs-caption); font-weight: var(--fw-medium); line-height: var(--lh-normal); color: var(--text-muted); }
.t-caption-uc { font-family: var(--font-body); font-size: var(--fs-caption-uc); font-weight: var(--fw-semibold); line-height: var(--lh-normal); letter-spacing: var(--ls-uppercase); text-transform: uppercase; color: var(--text-muted); }