/* ============================================================
   GEARING skin — brand layer on top of the canvas theme.
   The palette/fonts live in Theme Settings; this file adds what
   settings can't express: the mono "instrument" voice.
   The theme ships stable `sa-` hook classes for exactly this
   (see: .sa-<component>-title/-eyebrow/-price/-badge, .sa-btn,
   .sa-section-header, body.sa-tpl-<template>).
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  --ff-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* Eyebrows / kickers everywhere: uppercase mono, Gearing-style */
.sa-section-eyebrow,
[class*="sa-"][class*="-eyebrow"] {
  font-family: var(--ff-mono);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.72rem;
  font-weight: 500;
}

/* Prices read as instrument figures */
[class*="sa-"][class*="-price"] {
  font-family: var(--ff-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* Badges: compact mono tags instead of soft pills */
[class*="sa-"][class*="-badge"] {
  font-family: var(--ff-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.66rem;
  font-weight: 600;
}

/* Brighter violet for accent TEXT on the dark ground
   (buttons keep the deeper accent from settings for contrast) */
[data-scheme="dark"] .text-accent-500 {
  color: #8770FF;
}