/* ============================================================
   UFF! Design System - global entry point.
   Consumers link THIS file only. It @imports the full token
   closure (fonts, colors, type, spacing) plus a few base resets
   and brand utility classes. Keep this file import-only at top.
   ============================================================ */
@import url('tokens/fonts.css');
@import url('tokens/colors.css');
@import url('tokens/typography.css');
@import url('tokens/spacing.css');

/* --- base --- */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* --- brand type utilities --- */
.uff-display {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
}
.uff-eyebrow {
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-accent);
}
.uff-aside {            /* editorial italic interjection */
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
}
.uff-script {           /* handwritten accent */
  font-family: var(--font-script);
  color: var(--color-accent);
}
.uff-deva {
  font-family: var(--font-deva);
}

/* --- marquee ticker (used across pages) --- */
.uff-marquee {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: var(--tracking-marquee);
  white-space: nowrap;
}