/**
 * Revenue Guru — Component styles
 * Every value references a token from tokens.css. No hard-coded colors.
 */

/* ---------- Typography primitives ---------- */
.rg-heading {
  font-family: var(--rg-font-header);
  font-weight: var(--rg-weight-semibold);
  text-transform: uppercase;      /* board: headers are UPPERCASE */
  letter-spacing: var(--rg-tracking-none);
  line-height: var(--rg-leading-tight);
  color: var(--rg-color-text);
  margin: 0;
}
.rg-heading--1 { font-size: var(--rg-text-4xl); }
.rg-heading--2 { font-size: var(--rg-text-3xl); }
.rg-heading--3 { font-size: var(--rg-text-2xl); }
.rg-heading--4 { font-size: var(--rg-text-xl); }

.rg-subheader {
  font-family: var(--rg-font-body);
  font-weight: var(--rg-weight-medium);
  text-transform: uppercase;      /* board: subheaders are UPPERCASE */
  letter-spacing: var(--rg-tracking-none);
  color: var(--rg-color-text);
}

.rg-accent {
  font-family: var(--rg-font-accent);
  font-weight: var(--rg-weight-semibold);
  font-style: italic;             /* board: accent is SemiBold Italic */
  text-transform: lowercase;      /* board: accent is lowercase */
  color: var(--rg-color-secondary);
}

.rg-body {
  font-family: var(--rg-font-body);
  font-weight: var(--rg-weight-regular);
  font-size: var(--rg-text-md);
  line-height: var(--rg-leading-normal);
  color: var(--rg-color-text);
}

.rg-eyebrow {                      /* the small spaced-out section labels */
  font-family: var(--rg-font-body);
  font-weight: var(--rg-weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--rg-tracking-label);
  font-size: var(--rg-text-sm);
  color: var(--rg-color-text-muted);
}

/* ---------- Button ---------- */
.rg-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--rg-space-2);
  font-family: var(--rg-font-header);   /* board: button font = Barlow Condensed */
  font-weight: var(--rg-weight-semibold);
  text-transform: uppercase;            /* board: buttons use CAPITAL LETTERS */
  letter-spacing: var(--rg-tracking-none);
  font-size: var(--rg-text-md);
  line-height: 1;
  border: 1px solid transparent;
  border-radius: var(--rg-radius-md);
  padding: var(--rg-space-3) var(--rg-space-5);
  cursor: pointer;
  transition: filter 120ms ease, background-color 120ms ease, color 120ms ease;
}
.rg-button:disabled { opacity: 0.5; cursor: not-allowed; }
.rg-button:hover:not(:disabled) { filter: brightness(1.08); }

.rg-button--primary {
  background: var(--rg-color-primary);
  color: var(--rg-color-primary-contrast);
}
.rg-button--accent {
  background: var(--rg-color-accent);
  color: var(--rg-color-accent-contrast);
}
.rg-button--secondary {
  background: var(--rg-color-secondary);
  color: var(--rg-color-secondary-contrast);
}
.rg-button--outline {
  background: transparent;
  color: var(--rg-color-text);
  border-color: var(--rg-color-text);
}

.rg-button--sm { padding: var(--rg-space-2) var(--rg-space-4); font-size: var(--rg-text-sm); }
.rg-button--lg { padding: var(--rg-space-4) var(--rg-space-6); font-size: var(--rg-text-lg); }

/* ---------- Card ---------- */
.rg-card {
  background: var(--rg-color-surface);
  border: 1px solid var(--rg-color-border);
  border-radius: var(--rg-radius-lg);
  padding: var(--rg-space-6);
  box-shadow: var(--rg-shadow-sm);
}
.rg-card--inverse {
  background: var(--rg-color-bg-inverse);
  border-color: transparent;
  color: var(--rg-color-text-inverse);
}
.rg-card--gradient {
  background: var(--rg-gradient);
  border-color: transparent;
  color: var(--rg-color-text-inverse);
}

/* The typography primitives set their own color, which out-specifies the
   inherited color above — without this they render Midnight-on-Midnight. */
.rg-card--inverse .rg-heading,
.rg-card--inverse .rg-subheader,
.rg-card--inverse .rg-body,
.rg-card--gradient .rg-heading,
.rg-card--gradient .rg-subheader,
.rg-card--gradient .rg-body {
  color: inherit;
}

/* ---------- Input ---------- */
.rg-input-wrap { display: flex; flex-direction: column; gap: var(--rg-space-2); }
.rg-input-label {
  font-family: var(--rg-font-body);
  font-weight: var(--rg-weight-medium);
  font-size: var(--rg-text-sm);
  color: var(--rg-color-text);
}
.rg-input {
  font-family: var(--rg-font-body);
  font-size: var(--rg-text-md);
  color: var(--rg-color-text);
  background: var(--rg-color-surface);
  border: 1px solid var(--rg-color-border);
  border-radius: var(--rg-radius-md);
  padding: var(--rg-space-3) var(--rg-space-4);
  outline: none;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.rg-input::placeholder { color: var(--rg-color-text-muted); }
.rg-input:focus {
  border-color: var(--rg-color-secondary);
  box-shadow: 0 0 0 3px rgba(66, 30, 194, 0.18);
}

/* ---------- Badge ---------- */
.rg-badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--rg-font-body);
  font-weight: var(--rg-weight-medium);
  font-size: var(--rg-text-xs);
  text-transform: uppercase;
  letter-spacing: var(--rg-tracking-label);
  padding: var(--rg-space-1) var(--rg-space-3);
  border-radius: var(--rg-radius-pill);
}
.rg-badge--accent { background: var(--rg-color-accent); color: var(--rg-color-accent-contrast); }
.rg-badge--success { background: var(--rg-color-success); color: var(--rg-color-success-contrast); }
.rg-badge--secondary { background: var(--rg-color-secondary); color: var(--rg-color-secondary-contrast); }
.rg-badge--neutral { background: var(--rg-color-surface-muted); color: var(--rg-color-text); }