/* ──────────────────────────────────────────────────────────────────────
   RIPPLE TYPOGRAPHY SYSTEM
   The single source of truth for type across the app. Defines tokens
   for size, weight, line-height, letter-spacing, and opacity; plus a
   small set of preset utility classes (.t-display, .t-screen-title,
   .t-section, etc.) that wrap them.

   Aesthetic: cinematic, minimal, slightly underground, warm dark,
   modern social, premium indie. Type reads as quiet but confident —
   never gamer-y, never default-looking.

   Linked BEFORE style.css in index.html so tokens are available
   everywhere. style.css's per-component rules use these tokens
   directly so the system propagates without rewriting HTML.
   ────────────────────────────────────────────────────────────────── */

:root {
  /* ── SIZES (modular scale) ─────────────────────────────────────── */
  /* The 2026-05 design-system pass defines five canonical tiers
     (page / section / sub / body / cap). Older tokens stay so
     legacy components don't snap — but the canonical tiers are
     what new code reaches for. */
  --t-size-page:          22px;  /* PAGE TITLE — matches Camera "Ripple" badge size */
  --t-size-section:       22px;  /* SECTION    — "Today's Theme", "Archive", "Friend Requests" */
  --t-size-body:          16px;  /* BODY       — main paragraph text */
  --t-size-sub:           14px;  /* SUBHEADER  — "Private — only you", counts, last active */
  --t-size-cap:           12px;  /* CAPTION    — quiet meta */

  /* Legacy aliases — kept so existing rules don't churn while the
     migration is in flight. New code should reach for --t-size-{page|section|body|sub|cap}. */
  --t-size-display:       28px;  /* legacy "display" — older hero text */
  --t-size-screen-title:  22px;  /* legacy alias of --t-size-section */
  --t-size-card-title:    17px;  /* sheet/card titles */
  --t-size-stat:          14px;
  --t-size-button:        13px;
  --t-size-caption:       12px;  /* legacy alias of --t-size-cap */
  --t-size-tiny:          11px;  /* uppercase eyebrow / small caps */
  --t-size-micro:         10px;  /* timestamps, tiny meta */

  /* ── WEIGHTS ───────────────────────────────────────────────────── */
  --t-weight-regular:     400;
  --t-weight-medium:      500;  /* default body weight */
  --t-weight-semibold:    600;
  --t-weight-bold:        700;  /* titles, displays — never 800+ */

  /* ── LINE HEIGHTS ──────────────────────────────────────────────── */
  --t-lh-tight:           1.05;  /* big displays */
  --t-lh-snug:            1.2;   /* titles */
  --t-lh-normal:          1.45;  /* body, captions */

  /* ── LETTER SPACING ────────────────────────────────────────────── */
  --t-track-page:         -0.015em;  /* -0.5px at 34px — the spec */
  --t-track-display:      -0.025em;  /* legacy tighter "display" track */
  --t-track-title:        -0.015em;
  --t-track-tight:        -0.008em;
  --t-track-normal:        0;
  --t-track-caps:          0.12em;   /* uppercase labels */
  --t-track-caps-wide:     0.18em;   /* very small caps */

  /* ── SPACING SCALE (the 2026-05 unification) ──────────────────── */
  --sp-4:                 4px;
  --sp-8:                 8px;
  --sp-12:                12px;
  --sp-16:                16px;
  --sp-24:                24px;
  --sp-32:                32px;

  /* ── UNIVERSAL CARD CHROME ────────────────────────────────────── */
  --r-card:               16px;
  --r-card-tight:         12px;   /* inner elements (chips, image inserts) */
  --shadow-card:          0 1px 2px rgba(0,0,0,0.18), 0 6px 18px rgba(0,0,0,0.18);
  --shadow-card-hover:    0 2px 4px rgba(0,0,0,0.22), 0 12px 28px rgba(0,0,0,0.24);

  /* ── MOTION ──────────────────────────────────────────────────── */
  --dur-fast:             150ms;
  --dur-normal:           250ms;
  --dur-slow:             350ms;
  --ease-standard:        cubic-bezier(0.2, 0, 0, 1);
  --ease-spring:          cubic-bezier(0.34, 1.4, 0.64, 1);

  /* ── OPACITY (for muted/quiet variants — use sparingly) ────────── */
  --t-opacity-primary:    1;
  --t-opacity-muted:      0.72;
  --t-opacity-quiet:      0.55;
  --t-opacity-micro:      0.45;
}

/* ──────────────────────────────────────────────────────────────────────
   PRESET UTILITY CLASSES
   Apply via `class="t-display"` (etc.) anywhere you'd otherwise
   hand-roll font-size + weight + spacing. Bundles every property
   that defines the look so no one needs to re-derive values.
   ────────────────────────────────────────────────────────────────── */

.t-display {
  font-family: var(--font-body);
  font-size: var(--t-size-display);
  font-weight: var(--t-weight-bold);
  line-height: var(--t-lh-tight);
  letter-spacing: var(--t-track-display);
  color: var(--color-text);
}

.t-screen-title {
  font-family: var(--font-body);
  font-size: var(--t-size-screen-title);
  font-weight: var(--t-weight-bold);
  line-height: var(--t-lh-snug);
  letter-spacing: var(--t-track-title);
  color: var(--color-text);
}

.t-card-title {
  font-family: var(--font-body);
  font-size: var(--t-size-card-title);
  font-weight: var(--t-weight-semibold);
  line-height: var(--t-lh-snug);
  letter-spacing: var(--t-track-tight);
  color: var(--color-text);
}

.t-body {
  font-family: var(--font-body);
  font-size: var(--t-size-body);
  font-weight: var(--t-weight-medium);
  line-height: var(--t-lh-normal);
  color: var(--color-text);
}

.t-stat {
  font-family: var(--font-body);
  font-size: var(--t-size-stat);
  font-weight: var(--t-weight-medium);
  letter-spacing: var(--t-track-tight);
  color: var(--color-text);
}

.t-caption {
  font-family: var(--font-body);
  font-size: var(--t-size-caption);
  font-weight: var(--t-weight-medium);
  line-height: var(--t-lh-normal);
  letter-spacing: var(--t-track-normal);
  color: var(--color-text-muted);
}

.t-username {
  font-family: var(--font-body);
  font-size: var(--t-size-caption);
  font-weight: var(--t-weight-medium);
  letter-spacing: var(--t-track-tight);
  color: var(--color-text-muted);
}

/* SECTION header — "Today's Theme", "Archive", "Friend Requests".
   The 2026-05 design system moved this off the small-caps look.
   Use .t-eyebrow for the small uppercase label. */
.t-section {
  font-family: var(--font-body);
  font-size: var(--t-size-section);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--color-text);
  text-transform: none;
}

.t-micro {
  font-family: var(--font-body);
  font-size: var(--t-size-micro);
  font-weight: var(--t-weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--t-track-caps-wide);
  color: var(--color-text-dim);
}

.t-button {
  font-family: var(--font-body);
  font-size: var(--t-size-button);
  font-weight: var(--t-weight-medium);
  letter-spacing: var(--t-track-normal);
}

/* ──────────────────────────────────────────────────────────────────────
   2026-05 DESIGN-SYSTEM CLASSES
   The five canonical tiers (Page / Section / Sub / Body / Cap) plus
   universal card + button shells. New surfaces should use these; old
   .t-display / .t-screen-title etc. still resolve to legacy sizes.
   ────────────────────────────────────────────────────────────────── */

.t-page {
  font-family: var(--font-body);
  font-size: var(--t-size-page);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: var(--t-track-page);
  color: var(--color-text);
}

.t-sub {
  font-family: var(--font-body);
  font-size: var(--t-size-sub);
  font-weight: 500;
  line-height: 1.4;
  color: var(--color-text);
  opacity: 0.7;
}

.t-cap {
  font-family: var(--font-body);
  font-size: var(--t-size-cap);
  font-weight: 500;
  line-height: 1.4;
  color: var(--color-text);
  opacity: 0.6;
}

/* Eyebrow = the small uppercase label we used to call .t-section. */
.t-eyebrow {
  font-family: var(--font-body);
  font-size: var(--t-size-tiny);
  font-weight: var(--t-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--t-track-caps);
  color: var(--color-text-muted);
}

/* Universal card chrome. Apply via class="ui-card" anywhere we'd
   otherwise hand-roll background + border + radius + shadow. Per the
   2026-05 audit, every "container of stuff" surface (theme card,
   friend row, poll card, settings card, profile card) shares this. */
.ui-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
}
.ui-card-tight { border-radius: var(--r-card-tight); }

/* Universal buttons. Heights are fixed so primary / secondary line
   up no matter which screen they sit on. */
.ui-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 20px;
  border-radius: 12px;
  font-family: var(--font-body);
  font-size: var(--t-size-sub);
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard),
              transform var(--dur-fast) var(--ease-standard);
  -webkit-tap-highlight-color: transparent;
}
.ui-btn:active { transform: scale(0.97); }
.ui-btn-primary {
  background: var(--color-accent);
  color: var(--color-bg);
}
.ui-btn-primary:hover { filter: brightness(1.05); }
.ui-btn-secondary {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-border-strong);
}
.ui-btn-secondary:hover { background: var(--color-surface-2); border-color: var(--color-accent); color: var(--color-accent); }
.ui-btn-icon {
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 50%;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border-strong);
  color: var(--color-text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard);
  -webkit-tap-highlight-color: transparent;
}
.ui-btn-icon:hover { background: var(--color-surface-3); color: var(--color-text); }
.ui-btn-icon:active { transform: scale(0.94); }