/**
 * xGrid Design Language 1.0 — Typography
 *
 * Font scale, line-height, weight tokens, and text utility classes.
 * Must be loaded after xgrid-base.css.
 */

@layer xgrid-tokens {
  :root {
    /* ── Font Size Scale ── */
    --xgrid-font-xs: 11px;
    --xgrid-font-sm: 13px;
    --xgrid-font-md: 15px;
    --xgrid-font-lg: 18px;
    --xgrid-font-xl: 22px;
    --xgrid-font-2xl: 28px;

    /* ── Line Height ── */
    --xgrid-lh-tight: 1.25;
    --xgrid-lh-normal: 1.5;
    --xgrid-lh-loose: 1.75;

    /* ── Font Weight ── */
    --xgrid-fw-medium: 500;
    --xgrid-fw-semibold: 600;
    --xgrid-fw-bold: 700;
  }
}

@layer xgrid-components {

  /* ── Text Hierarchy ── */

  .xgrid-title {
    font-size: var(--xgrid-font-xl);
    font-weight: var(--xgrid-fw-bold);
    line-height: var(--xgrid-lh-tight);
    color: var(--xgrid-text-primary);
  }

  .xgrid-section-title {
    font-size: var(--xgrid-font-md);
    font-weight: var(--xgrid-fw-semibold);
    line-height: var(--xgrid-lh-tight);
    color: var(--xgrid-text-primary);
  }

  .xgrid-label {
    font-size: var(--xgrid-font-sm);
    font-weight: var(--xgrid-fw-medium);
    color: var(--xgrid-text-secondary);
  }

  .xgrid-body {
    font-size: var(--xgrid-font-md);
    line-height: var(--xgrid-lh-normal);
    color: var(--xgrid-text-primary);
  }

  .xgrid-caption {
    font-size: var(--xgrid-font-xs);
    color: var(--xgrid-text-muted);
  }

  /* Dark mode: caption must NOT carry critical information */

  .xgrid-metric {
    font-size: var(--xgrid-font-2xl);
    font-weight: var(--xgrid-fw-bold);
    line-height: 1;
  }
}