/* KNBL Typography Tokens */

/* Google Fonts import for Inter */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700;800;900&display=swap');

:root {
  /* Font families */
  --font-sans: 'Inter', sans-serif;           /* @kind font */
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;  /* @kind font */

  /* Font weights */
  --weight-extralight: 200;  /* @kind other */
  --weight-light:      300;  /* @kind other */
  --weight-regular:    400;  /* @kind other */
  --weight-medium:     500;  /* @kind other */
  --weight-semibold:   600;  /* @kind other */
  --weight-bold:       700;  /* @kind other */
  --weight-extrabold:  800;  /* @kind other */
  --weight-black:      900;  /* @kind other */

  /* Type scale — display (headlines) */
  --text-display-xl:  72px;  /* @kind spacing */
  --text-display-lg:  56px;  /* @kind spacing */
  --text-display-md:  48px;  /* @kind spacing */
  --text-display-sm:  40px;  /* @kind spacing */
  --text-display-xs:  36px;  /* @kind spacing */

  /* Type scale — body */
  --text-body-xl:     26px;  /* @kind spacing */
  --text-body-lg:     21px;  /* @kind spacing */
  --text-body-md:     18px;  /* @kind spacing */
  --text-body-sm:     16px;  /* @kind spacing */
  --text-body-xs:     14px;  /* @kind spacing */
  --text-body-2xs:    12px;  /* @kind spacing */

  /* Line heights */
  --leading-tight:    1.0;      /* @kind other */
  --leading-snug:     1.1;      /* @kind other */
  --leading-normal:   1.4;      /* @kind other */
  --leading-relaxed:  1.5;      /* @kind other */

  /* Letter spacing */
  --tracking-display: -0.04em;  /* @kind other */
  --tracking-tight:   -0.02em;  /* @kind other */
  --tracking-normal:   0em;     /* @kind other */
  --tracking-wide:     0.02em;  /* @kind other */

  /* Semantic type role — font-size shorthands (single value per token) */
  --type-size-hero:         var(--text-display-xl);  /* @kind spacing */
  --type-size-section:      var(--text-display-lg);  /* @kind spacing */
  --type-size-body-lead:    var(--text-body-xl);     /* @kind spacing */
  --type-size-body:         var(--text-body-md);     /* @kind spacing */
  --type-size-caption:      var(--text-body-xs);     /* @kind spacing */
  --type-size-label:        var(--text-body-xs);     /* @kind spacing */
}