/* ============================================================
   Soofos — Shared component / helper classes
   Ported from Presentation/assets/tokens.css (non-:root section).
   All visual values reference CSS custom properties defined in
   tokens.css (theme root). No hardcoded hex/font/spacing here.
   ============================================================ */

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: var(--font);
  color: var(--body);
  background: var(--page);
  -webkit-font-smoothing: antialiased;
}
a { text-decoration: none; color: inherit; }
button { font-family: var(--font); }
img { max-width: 100%; display: block; }

/* ---------- Buttons (8px, weight 700-800, soft shadow + hover lift) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: none; border-radius: var(--r-btn); cursor: pointer;
  font: 800 14px var(--font); padding: 12px 22px;
  transition: background .15s, border-color .15s, box-shadow .15s, transform .12s;
  text-decoration: none;
}
.btn:active { transform: translateY(0); }
.btn-primary { background: var(--blue); color: var(--white); box-shadow: 0 4px 12px rgba(99,156,224,.35); }
.btn-primary:hover { background: var(--blue-hover); transform: translateY(-2px); box-shadow: 0 7px 18px rgba(99,156,224,.42); }
.btn-primary.lg { padding: 15px 30px; font-size: 16px; }
.btn-buy { background: var(--red); color: var(--white); box-shadow: 0 4px 12px rgba(255,72,89,.32); }
.btn-buy:hover { background: var(--red-hover); transform: translateY(-2px); box-shadow: 0 7px 18px rgba(255,72,89,.4); }
.btn-buy.lg { padding: 15px 30px; font-size: 16px; }
.btn-save { background: var(--green); color: var(--white); box-shadow: 0 4px 12px rgba(34,182,109,.3); }
.btn-save:hover { background: var(--green-hover); transform: translateY(-2px); box-shadow: 0 7px 18px rgba(34,182,109,.38); }
.btn-ghost { background: var(--white); color: var(--ink); border: 2px solid #d7dfea; }
.btn-ghost:hover { border-color: var(--blue); }
.btn-readmore { background: var(--blue-fill); color: var(--deep-blue); }
.btn-readmore:hover { background: #d8e6f7; }
.btn-navy { background: var(--ink); color: var(--white); }
.btn-navy:hover { background: var(--ink-soft); }
.btn-sm { padding: 9px 15px; font-size: 12px; }

/* ---------- Entitlement-aware upgrade CTA (parts/upgrade-cta.php) ---------- */
.upgrade-cta { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.upgrade-cta__benefit { margin: 0; font: 600 14px/1.5 var(--font); color: var(--muted); }
.upgrade-cta__arrow { display: inline-flex; }
.upgrade-cta__arrow svg { width: 18px; height: 18px; }
.upgrade-cta__btn:focus-visible { outline: 2px solid var(--deep-blue); outline-offset: 2px; }

/* ---------- Cards ---------- */
.card { background: var(--white); border: 1px solid var(--card-border); border-radius: var(--r-card); overflow: hidden; }
.card-pad { padding: 22px 24px; }

/* ---------- Hover utilities ---------- */
.hov-card { transition: box-shadow .15s, border-color .15s, transform .1s; }
.hov-card:hover { box-shadow: var(--shadow-card); }
.hov-lift:hover { box-shadow: var(--shadow-card); transform: translateY(-2px); }
.hov-blue { transition: border-color .15s, background .15s; }
.hov-blue:hover { border-color: var(--blue); }
.hov-blue-bg:hover { border-color: var(--blue); background: var(--blue-tint); }
.hov-blue-text { transition: color .15s; }
.hov-blue-text:hover { color: var(--blue); }
.hov-tint { transition: background .15s; }
.hov-tint:hover { background: var(--blue-tint); }
.hov-strip:hover { background: var(--strip); }

/* ---------- Pills / chips / badges ---------- */
.pill { display: inline-flex; align-items: center; gap: 6px; border-radius: var(--r-pill); font: 800 12px var(--font); padding: 6px 14px; background: var(--blue-fill); color: var(--deep-blue); }
.chip-mono { font: 800 9.5px var(--mono); background: var(--blue-fill); color: var(--deep-blue); border-radius: var(--r-pill); padding: 3px 9px; }
.badge-amber { font: 900 10.5px var(--font); color: var(--yellow-ink); background: var(--yellow-fill); border-radius: var(--r-pill); padding: 2px 8px; }
.badge-blue  { font: 900 10px var(--font);   color: var(--deep-blue);  background: var(--blue-fill);  border-radius: var(--r-pill); padding: 2px 7px; }
.badge-green { font: 800 11px var(--font);    color: var(--green-ink);  background: var(--green-fill); border-radius: var(--r-pill); padding: 3px 9px; }

/* category chip helpers (fill + ink), one hue per topic */
.chip-purple{background:var(--purple-fill);color:var(--purple-ink)} .chip-lightblue{background:var(--lightblue-fill);color:var(--lightblue-ink)}
.chip-green{background:var(--green-fill);color:var(--green-ink)} .chip-orange{background:var(--orange-fill);color:var(--orange-ink)}
.chip-blue{background:var(--blue-fill);color:var(--deep-blue)} .chip-yellow{background:var(--yellow-fill);color:var(--yellow-ink)}
.chip-red{background:var(--red-fill);color:var(--red-ink)}

/* ---------- Image placeholder (diagonal stripes, topic-tinted) ---------- */
.ph { background: repeating-linear-gradient(45deg,var(--blue-fill),var(--blue-fill) 8px,var(--blue-tint) 8px,var(--blue-tint) 16px); display: grid; place-items: center; font: 10px var(--mono); color: var(--muted-2); text-align: center; padding: 6px; }
.ph-lg { background: repeating-linear-gradient(45deg,var(--blue-fill),var(--blue-fill) 10px,var(--blue-tint) 10px,var(--blue-tint) 20px); }
.ph-purple{background:repeating-linear-gradient(45deg,var(--purple-fill),var(--purple-fill) 8px,#f7f2ff 8px,#f7f2ff 16px);color:var(--purple-ink)}
.ph-green{background:repeating-linear-gradient(45deg,var(--green-fill),var(--green-fill) 8px,#f2fbf6 8px,#f2fbf6 16px);color:var(--green-ink)}
.ph-orange{background:repeating-linear-gradient(45deg,var(--orange-fill),var(--orange-fill) 8px,#fff6ef 8px,#fff6ef 16px);color:var(--orange-ink)}
.ph-lightblue{background:repeating-linear-gradient(45deg,var(--lightblue-fill),var(--lightblue-fill) 8px,#eefaff 8px,#eefaff 16px);color:var(--lightblue-ink)}
.ph-yellow{background:repeating-linear-gradient(45deg,var(--yellow-fill),var(--yellow-fill) 8px,#fffce8 8px,#fffce8 16px);color:var(--yellow-ink)}

/* ---------- Course card ---------- */
.course-card { background:var(--white); border:1px solid var(--card-border); border-radius:var(--r-card); overflow:hidden; cursor:pointer; }
.course-card:hover { box-shadow: var(--shadow-card); }

/* ---------- Section helpers ---------- */
.section { padding: 0 64px 44px; }
.h-xl { font-size: 50px; font-weight: 900; color: var(--ink); line-height: 1.1; letter-spacing: -.5px; }
.h-lg { font-size: 24px; font-weight: 800; color: var(--ink); }
.h-md { font-size: 18px; font-weight: 800; color: var(--ink); }
.text-muted { color: var(--muted); }

/* ---------- Outline icon system (soofos_icon() helper) ----------
   One coherent 18–20px stroke family. Icons inherit color via currentColor
   and never carry their own hardcoded color. Base sizing lives here so the
   portal, player, Studio, manager and public surfaces share one grammar. */
.sf-icon {
    flex: none;
    width: 20px;
    height: 20px;
    display: inline-block;
    vertical-align: middle;
    color: inherit;
    stroke: currentColor;
}
.sf-icon--sm { width: 18px; height: 18px; }
.sf-icon--lg { width: 24px; height: 24px; }

.goal-ring { display: grid; place-items: center; border-radius: 50%; }

.row { display: flex; align-items: center; }
.col { display: flex; flex-direction: column; }
.gap-8 { gap: 8px; } .gap-12 { gap: 12px; } .gap-16 { gap: 16px; }
.grow { flex: 1; min-width: 0; }
.ml-auto { margin-left: auto; }
.hidden { display: none !important; }

/* ----------------------------------------------------------------------
 * Global prefers-reduced-motion guard (TASK-073).
 * Components.css is loaded by every logged-in and public surface and is
 * the most upstream place to suppress decorative transitions + transforms
 * for users who request reduced motion at the OS level. Per-page
 * `@keyframes` rules (player.css, path.css, portal-search.css) already
 * have their own scoped guards.
 * -------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .btn,
    .btn-primary,
    .btn-buy,
    .btn-save,
    .btn-ghost,
    .btn-navy,
    .btn-sm,
    .hov-card,
    .hov-lift,
    .hov-blue,
    .hov-blue-bg,
    .hov-blue-text,
    .hov-tint,
    .hov-strip,
    .course-card {
        transition: none !important;
        transform: none !important;
    }
}