@import url("tokens/fonts.css");
@import url("tokens/colors.css");
@import url("tokens/typography.css");
@import url("tokens/spacing.css");
@import url("tokens/effects.css");
@import url("tokens/semantic.css");
@import url("tokens/base.css");

/* ---- Logo (components/brand/Logo.jsx, size 32, lockup/mark) ---- */
.logo { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; }
.logo-mark { position: relative; width: 32px; height: 32px; border-radius: var(--radius-pill); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.logo-mark--brand { background: var(--brand); }
.logo-mark--negative { background: var(--sand-50); }
.logo-glyph { font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: 16px; line-height: 1; }
.logo-mark--brand .logo-glyph { color: var(--sand-50); }
.logo-mark--negative .logo-glyph { color: var(--brand); }
.logo-dot { position: absolute; right: 2px; bottom: 3px; width: 8px; height: 8px; border-radius: var(--radius-pill); background: var(--action); }
.logo-word { display: flex; flex-direction: column; gap: 4px; }
.logo-wordmark { font-family: var(--font-display); font-size: 30px; font-weight: var(--weight-semibold); letter-spacing: -0.02em; color: var(--ink-900); line-height: 1; }
.logo-wordmark .dot { color: var(--action); }
.logo-tagline { font-family: var(--font-body); font-size: 11px; letter-spacing: var(--tracking-wordmark); text-transform: uppercase; color: var(--ink-500); }

/* ---- Button (components/core/Button.jsx) ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1); font-family: var(--font-display); border-radius: var(--radius-pill); white-space: nowrap; text-decoration: none; cursor: pointer; transition: var(--transition); border: 1px solid transparent; }
.btn-lg { padding: 16px 30px; font-size: 1.125rem; }
.btn-action { background: var(--action); color: var(--text-on-action); font-weight: var(--weight-semibold); }
.btn-action:hover { background: var(--action-hover); transform: var(--lift-hover); text-decoration: none; }
.btn-action:active { background: var(--action-active); transform: var(--lift-active); }

/* ---- AffiliateDisclosure (components/feedback/AffiliateDisclosure.jsx) ---- */
.affiliate-disclosure { padding: 18px 20px; border-radius: var(--radius-input); background: var(--warning-bg); color: var(--warning); font-family: var(--font-body); font-size: var(--size-small); line-height: var(--leading-small); }

/* ---- Utility ---- */
.back-link { font-family: var(--font-display); font-weight: 500; font-size: var(--size-small); color: var(--brand); text-decoration: none; border: 1px solid var(--outline-border); border-radius: var(--radius-pill); padding: 10px 20px; transition: var(--transition); }
.back-link:hover { border-color: var(--brand); background: var(--brand-50); text-decoration: none; }

body { margin: 0; background: var(--bg); }
a { color: var(--text-link); }
a:hover { color: var(--text-link-hover); }

@media (max-width: 720px) {
  h1 { font-size: 34px !important; }
  h2 { font-size: 28px !important; }
  .grid-2, .grid-3, .instructor-grid { grid-template-columns: 1fr !important; }
}