/* frontend/public/tokens.css — shared design tokens, loaded by style.css, index.html, and admin/index.html */

:root {
  /* Typography scale — 16px floor */
  --fs-body: 16px;
  --fs-label: 16px;
  --fs-subtitle: 18px;
  --fs-title-sm: 20px;
  --fs-title: 24px;
  --fs-title-lg: 32px;
  --fs-hero: 40px;
  --fs-hero-lg: 54px;

  /* Icons — single unified size */
  --icon-sm: 30px;
  --icon-md: 30px;

  /* Buttons */
  --btn-h: 48px;
  --btn-radius: 12px;

  /* Section rhythm */
  --section-pad: 70px;
}

/* ---------- shared button component ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: var(--btn-h);
  padding: 0 24px;
  border-radius: var(--btn-radius);
  border: none;
  font-family: inherit;
  font-size: var(--fs-body);
  font-weight: 700;
  cursor: pointer;
  transition: background .15s, transform .15s, border-color .15s;
}
.btn-primary { background: var(--primary, #D61F26); color: #fff; }
.btn-secondary { background: var(--surface, #fff); color: var(--text, #1a1a2e); border: 1px solid var(--outline-strong, #cfd3dc); }
.btn-ghost { background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.38); backdrop-filter: blur(8px) saturate(1.2); }

/* ---------- shared icon sizing ---------- */
.icon, .msym { font-variation-settings: 'FILL' 0, 'wght' 400, 'opsz' 24; }
.icon-sm, .msym.icon-sm { font-size: var(--icon-sm); }
.icon-md, .msym.icon-md { font-size: var(--icon-md); }