@import url("/tokens.css");

/* =========================================================
   SOCIALWORKY — SHARED THEME (components)
   Brand + shell tokens live in /tokens.css (imported above).
   This file adds the shared base type + components for the MAIN
   pages (home, training, tools hub). Link it BEFORE a page's own
   <style> so page-specific rules can still override:
     <link rel="stylesheet" href="/theme.css">

   Bespoke tool pages link /tokens.css instead (variables only),
   so these component classes never bleed into their own styles.

   The font itself (Hanken Grotesk) is loaded by /header.js,
   which every page already includes.
   ========================================================= */

*{ box-sizing:border-box; }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

.wrap{ max-width:var(--sw-maxw); margin:0 auto; padding:var(--sw-gutter); }

a{ color:var(--accentDeep); }

/* Shared buttons */
.btn{
  display:inline-block; font-size:15px; font-weight:700; font-family:inherit; cursor:pointer;
  text-decoration:none; padding:11px 20px; border-radius:9px; border:1px solid transparent;
  transition:background .15s,border-color .15s,box-shadow .15s;
}
.btn-primary{ background:var(--accent); color:#fff; border-color:var(--accent); }
.btn-primary:hover{ background:var(--accentDeep); border-color:var(--accentDeep); }
.btn-ghost{ background:#fff; color:var(--accentDeep); border-color:var(--coral-line); }
.btn-ghost:hover{ border-color:var(--accent); background:var(--coral-bg); }

/* Section heads + lead text */
.section-title{
  font-size:12px; letter-spacing:1.5px; text-transform:uppercase; font-weight:700;
  color:var(--accentDeep); margin:52px 0 18px; padding-bottom:6px; border-bottom:1px solid var(--line);
}
.lead{ color:var(--muted); font-size:16px; margin:0 0 20px; max-width:64ch; }

/* Inline text links */
.inline-link{ display:inline-block; font-size:14px; font-weight:700; color:var(--accentDeep); text-decoration:none; }
.inline-link:hover{ text-decoration:underline; }

/* Footer */
.foot{ color:var(--muted); font-size:12.5px; margin-top:56px; border-top:1px solid var(--line); padding-top:16px; }