/* NEXTRON AI Design System - Typography Tokens */

:root {
  /* FONT FAMILIES */
  --font-display: 'LamboType', 'Roboto', 'Helvetica Neue', 'Arial', sans-serif;
  --font-ui: 'LamboType', 'Roboto', 'Helvetica Neue', 'Arial', sans-serif;
  --font-body: 'LamboType', 'Roboto', 'Helvetica Neue', 'Arial', sans-serif;
  --font-mono: 'Courier New', 'Courier', monospace;

  /* FONT WEIGHTS */
  --weight-light: 300;
  --weight-normal: 400;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-black: 900;

  /* DISPLAY SIZES */
  --font-size-display-1: 7.5rem; /* 120px */
  --line-height-display-1: 0.92;
  --letter-spacing-display-1: normal;

  --font-size-display-2: 5rem; /* 80px */
  --line-height-display-2: 1.13;
  --letter-spacing-display-2: normal;

  --font-size-display-3: 3.375rem; /* 54px */
  --line-height-display-3: 1.19;
  --letter-spacing-display-3: normal;

  --font-size-display-4: 2.5rem; /* 40px */
  --line-height-display-4: 1.15;
  --letter-spacing-display-4: normal;

  /* HEADING SIZES */
  --font-size-heading-1: 1.688rem; /* 27px */
  --line-height-heading-1: 1.37;
  --letter-spacing-heading-1: normal;

  --font-size-heading-2: 1.5rem; /* 24px */
  --line-height-heading-2: 1.33;
  --letter-spacing-heading-2: normal;

  /* BODY SIZES */
  --font-size-body-lg: 1.125rem; /* 18px */
  --line-height-body-lg: 1.56;
  --letter-spacing-body-lg: normal;

  --font-size-body: 1rem; /* 16px */
  --line-height-body: 1.5;
  --letter-spacing-body: normal;

  --font-size-body-sm: 0.875rem; /* 14px */
  --line-height-body-sm: 1.43;
  --letter-spacing-body-sm: normal;

  /* BUTTON SIZES */
  --font-size-button-lg: 1rem; /* 16px */
  --line-height-button-lg: 1.5;
  --letter-spacing-button-lg: normal;

  --font-size-button: 0.9rem; /* 14.4px */
  --line-height-button: 1;
  --letter-spacing-button: 0.14px;

  --font-size-button-sm: 0.8125rem; /* 13px */
  --line-height-button-sm: 1.2;
  --letter-spacing-button-sm: 0.13px;

  /* CAPTION & LABEL SIZES */
  --font-size-caption: 0.875rem; /* 14px */
  --line-height-caption: 1.29;
  --letter-spacing-caption: -0.42px;

  --font-size-label: 0.75rem; /* 12px */
  --line-height-label: 1.83;
  --letter-spacing-label: 0.96px;

  --font-size-micro: 0.625rem; /* 10px */
  --line-height-micro: 1.4;
  --letter-spacing-micro: 0.225px;

  /* TEXT TRANSFORM */
  --text-transform-upper: uppercase;
  --text-transform-normal: none;
}

/* BASE TYPOGRAPHY STYLES */
body {
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  font-weight: var(--weight-normal);
  line-height: var(--line-height-body);
  color: var(--text-primary);
}

h1 {
  font-family: var(--font-display);
  font-size: var(--font-size-display-1);
  font-weight: var(--weight-normal);
  line-height: var(--line-height-display-1);
  text-transform: var(--text-transform-upper);
}

h2 {
  font-family: var(--font-display);
  font-size: var(--font-size-display-2);
  font-weight: var(--weight-normal);
  line-height: var(--line-height-display-2);
  text-transform: var(--text-transform-upper);
}

h3 {
  font-family: var(--font-display);
  font-size: var(--font-size-heading-1);
  font-weight: var(--weight-normal);
  line-height: var(--line-height-heading-1);
  text-transform: var(--text-transform-upper);
}

p {
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  color: var(--text-primary);
}

/* UTILITY CLASSES FOR TYPOGRAPHY */
.text-display-1 {
  font-size: var(--font-size-display-1);
  font-weight: var(--weight-normal);
  line-height: var(--line-height-display-1);
  text-transform: var(--text-transform-upper);
}

.text-display-2 {
  font-size: var(--font-size-display-2);
  font-weight: var(--weight-normal);
  line-height: var(--line-height-display-2);
  text-transform: var(--text-transform-upper);
}

.text-heading-1 {
  font-size: var(--font-size-heading-1);
  font-weight: var(--weight-normal);
  line-height: var(--line-height-heading-1);
  text-transform: var(--text-transform-upper);
}

.text-body-lg {
  font-size: var(--font-size-body-lg);
  line-height: var(--line-height-body-lg);
}

.text-body {
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
}

.text-body-sm {
  font-size: var(--font-size-body-sm);
  line-height: var(--line-height-body-sm);
}

.text-label {
  font-size: var(--font-size-label);
  line-height: var(--line-height-label);
  letter-spacing: var(--letter-spacing-label);
  text-transform: var(--text-transform-upper);
}

.text-caption {
  font-size: var(--font-size-caption);
  line-height: var(--line-height-caption);
  letter-spacing: var(--letter-spacing-caption);
  text-transform: var(--text-transform-upper);
}

.text-micro {
  font-size: var(--font-size-micro);
  line-height: var(--line-height-micro);
  letter-spacing: var(--letter-spacing-micro);
  text-transform: var(--text-transform-upper);
}
