/* ═══════════════════════════════════════════════════════════
   Selfrag DS Core — DOM-agnostic components
   ===========================================================
   Drop-in CSS classes (prefix `sf-*`) for any HTML context:
   web, email, PDF, presentations, Drupal templates.

   Usage:
     <link rel="stylesheet" href="../SELF-Branding/tokens.css">
     <link rel="stylesheet" href="../SELF-Branding/selfrag-ds-core.css">

   No global element selectors — all classes opt-in.
   ═══════════════════════════════════════════════════════════ */

@import "./tokens.css";

/* ── Body / Reset ──────────────────────────────────────────── */
.sf-body {
  font-family: var(--sf-font-body);
  font-weight: var(--sf-font-weight-light);
  font-size: var(--sf-text-md);
  line-height: var(--sf-lh-md);
  color: var(--sf-text);
  background: var(--sf-bg);
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Typography ────────────────────────────────────────────── */
.sf-h1, .sf-h2, .sf-h3, .sf-h4, .sf-h5, .sf-h6 {
  font-family: var(--sf-font-heading);
  font-weight: var(--sf-font-weight-light);
  color: var(--sf-heading);
  margin: 0 0 var(--sf-sp-4);
  line-height: 1.2;
}

.sf-h1 { font-size: clamp(var(--sf-text-4xl), 6vw, var(--sf-text-6xl)); line-height: var(--sf-lh-5xl); }
.sf-h2 { font-size: clamp(var(--sf-text-3xl), 4vw, var(--sf-text-4xl)); line-height: var(--sf-lh-4xl); }
.sf-h3 { font-size: var(--sf-text-2xl); line-height: var(--sf-lh-2xl); }
.sf-h4 { font-size: var(--sf-text-xl);  line-height: var(--sf-lh-xl); font-weight: var(--sf-font-weight-regular); }
.sf-h5 { font-size: var(--sf-text-lg);  line-height: var(--sf-lh-lg); font-weight: var(--sf-font-weight-medium); }
.sf-h6 { font-size: var(--sf-text-md);  line-height: var(--sf-lh-md); font-weight: var(--sf-font-weight-medium); text-transform: uppercase; letter-spacing: var(--sf-tracking-wide); }

.sf-copy {
  font-family: var(--sf-font-body);
  font-size: var(--sf-text-md);
  line-height: var(--sf-lh-md);
  color: var(--sf-text);
  margin: 0 0 var(--sf-sp-4);
}

.sf-lead {
  font-family: var(--sf-font-body);
  font-size: var(--sf-text-lg);
  line-height: var(--sf-lh-lg);
  font-weight: var(--sf-font-weight-light);
  color: var(--sf-text);
  margin: 0 0 var(--sf-sp-6);
}

.sf-muted     { color: var(--sf-text-secondary); }
.sf-meta      { font-size: var(--sf-text-sm); color: var(--sf-text-secondary); }
.sf-eyebrow {
  font-size: var(--sf-text-sm);
  font-weight: var(--sf-font-weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--sf-tracking-section);
  color: var(--sf-red);
  margin: 0 0 var(--sf-sp-3);
}

/* Section title with red underline accent */
.sf-section-title {
  font-family: var(--sf-font-heading);
  font-weight: var(--sf-font-weight-light);
  font-size: clamp(var(--sf-text-3xl), 4vw, var(--sf-text-4xl));
  line-height: var(--sf-lh-3xl);
  color: var(--sf-heading);
  margin: 0 0 var(--sf-sp-6);
  position: relative;
  padding-bottom: var(--sf-sp-4);
}

.sf-section-title::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0;
  width: 80px; height: 3px;
  background: var(--sf-red);
}

.sf-section-title.center { text-align: center; }
.sf-section-title.center::after { left: 50%; transform: translateX(-50%); }

/* ── Layout helpers ────────────────────────────────────────── */
.sf-container       { max-width: var(--sf-container-max); margin: 0 auto; padding: 0 var(--sf-sp-12); }
.sf-container-wide  { max-width: var(--sf-container-wide); margin: 0 auto; padding: 0 var(--sf-sp-12); }
.sf-section         { padding: var(--sf-section-padding); }
.sf-section.alt     { background: var(--sf-bg-alt); }
.sf-section.dark    { background: var(--sf-footer-bg); color: var(--sf-white); }
.sf-section.dark .sf-h1,
.sf-section.dark .sf-h2,
.sf-section.dark .sf-h3,
.sf-section.dark .sf-h4,
.sf-section.dark .sf-section-title { color: var(--sf-white); }

.sf-stack   { display: flex; flex-direction: column; gap: var(--sf-sp-4); }
.sf-row     { display: flex; gap: var(--sf-sp-4); }
.sf-grid-2  { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sf-sp-6); }
.sf-grid-3  { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sf-sp-6); }
.sf-grid-4  { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sf-sp-6); }
@media (max-width: 768px) {
  .sf-grid-2, .sf-grid-3, .sf-grid-4 { grid-template-columns: 1fr; }
  .sf-container, .sf-container-wide { padding: 0 var(--sf-sp-6); }
}

.sf-divider {
  width: 100%; height: 1px; background: var(--sf-border);
  margin: var(--sf-sp-8) 0;
}
.sf-divider.brand { background: var(--sf-red); height: 3px; width: 80px; }
.sf-divider.brand.center { margin-left: auto; margin-right: auto; }

/* ── Buttons ───────────────────────────────────────────────── */
.sf-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sf-sp-2);
  font-family: var(--sf-font-body);
  font-size: var(--sf-text-md);
  font-weight: var(--sf-font-weight-medium);
  line-height: 1;
  text-decoration: none;
  color: var(--sf-white);
  background: var(--sf-red);
  padding: var(--sf-sp-3) var(--sf-sp-6);
  border-radius: var(--sf-radius-sm);
  border: 1px solid var(--sf-red);
  cursor: pointer;
  transition: background var(--sf-transition-fast), transform var(--sf-transition-fast), box-shadow var(--sf-transition-fast);
}
.sf-btn:hover { background: var(--sf-red-dark); border-color: var(--sf-red-dark); transform: translateY(-1px); box-shadow: var(--sf-shadow-md); }
.sf-btn:focus-visible { outline: none; box-shadow: var(--sf-shadow-glow); }

.sf-btn.outline {
  background: transparent;
  color: var(--sf-red);
}
.sf-btn.outline:hover { background: var(--sf-red); color: var(--sf-white); }

.sf-btn.ghost {
  background: transparent;
  color: var(--sf-heading);
  border-color: var(--sf-border);
}
.sf-btn.ghost:hover { background: var(--sf-bg-alt); border-color: var(--sf-grey-mid); color: var(--sf-heading); }

.sf-btn.lg { padding: var(--sf-sp-4) var(--sf-sp-8); font-size: var(--sf-text-lg); }
.sf-btn.sm { padding: var(--sf-sp-2) var(--sf-sp-4); font-size: var(--sf-text-sm); }

/* ── Cards ─────────────────────────────────────────────────── */
.sf-card {
  background: var(--sf-card-bg);
  border: 1px solid var(--sf-border);
  border-radius: var(--sf-radius-md);
  padding: var(--sf-sp-6);
  transition: box-shadow var(--sf-transition-base), transform var(--sf-transition-base);
}
.sf-card:hover { box-shadow: var(--sf-shadow-md); transform: translateY(-2px); }

.sf-card.elevated  { box-shadow: var(--sf-shadow-md); border-color: transparent; }
.sf-card.accent    { border-left: 3px solid var(--sf-red); }
.sf-card.dark      { background: var(--sf-footer-bg); color: var(--sf-white); border-color: transparent; }
.sf-card.dark .sf-h3, .sf-card.dark .sf-h4 { color: var(--sf-white); }

/* ── Tags / Pills ─────────────────────────────────────────── */
.sf-tag {
  display: inline-flex; align-items: center;
  font-family: var(--sf-font-body);
  font-size: var(--sf-text-sm);
  font-weight: var(--sf-font-weight-medium);
  padding: var(--sf-sp-1) var(--sf-sp-3);
  background: var(--sf-bg-alt);
  color: var(--sf-text);
  border-radius: var(--sf-radius-sm);
  letter-spacing: var(--sf-tracking-base);
}
.sf-tag.red    { background: var(--sf-red); color: var(--sf-white); }
.sf-tag.outline{ background: transparent; border: 1px solid var(--sf-border); }
.sf-tag.success{ background: #e8f5e9; color: var(--sf-green); }
.sf-tag.warn   { background: #fff3e0; color: var(--sf-warn); }
.sf-tag.error  { background: #ffebee; color: var(--sf-error); }

.sf-pill {
  display: inline-flex; align-items: center;
  font-family: var(--sf-font-body);
  font-size: var(--sf-text-sm);
  font-weight: var(--sf-font-weight-medium);
  padding: var(--sf-sp-2) var(--sf-sp-4);
  background: var(--sf-bg-alt);
  color: var(--sf-text);
  border-radius: var(--sf-radius-full);
}
.sf-pill.red { background: var(--sf-red); color: var(--sf-white); }

/* ── Table ─────────────────────────────────────────────────── */
.sf-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--sf-font-body);
  font-size: var(--sf-text-md);
}
.sf-table th, .sf-table td {
  text-align: left;
  padding: var(--sf-sp-3) var(--sf-sp-4);
  border-bottom: 1px solid var(--sf-border);
}
.sf-table th {
  font-weight: var(--sf-font-weight-medium);
  color: var(--sf-text-secondary);
  font-size: var(--sf-text-sm);
  text-transform: uppercase;
  letter-spacing: var(--sf-tracking-wide);
  background: var(--sf-bg-alt);
}
.sf-table tr:hover td { background: var(--sf-bg-alt); }

/* ── Forms ─────────────────────────────────────────────────── */
.sf-input, .sf-textarea, .sf-select {
  font-family: var(--sf-font-body);
  font-size: var(--sf-text-md);
  padding: var(--sf-sp-3) var(--sf-sp-4);
  border: 1px solid var(--sf-border);
  border-radius: var(--sf-radius-sm);
  width: 100%;
  background: var(--sf-bg);
  color: var(--sf-text);
  transition: border-color var(--sf-transition-fast), box-shadow var(--sf-transition-fast);
}
.sf-input:focus, .sf-textarea:focus, .sf-select:focus {
  outline: none;
  border-color: var(--sf-red);
  box-shadow: var(--sf-shadow-glow);
}
.sf-label {
  display: block;
  font-size: var(--sf-text-sm);
  font-weight: var(--sf-font-weight-medium);
  color: var(--sf-heading);
  margin-bottom: var(--sf-sp-2);
}

/* ── Pull Quote ───────────────────────────────────────────── */
.sf-pullquote {
  font-family: var(--sf-font-heading);
  font-weight: var(--sf-font-weight-light);
  font-size: var(--sf-text-2xl);
  line-height: 1.4;
  color: var(--sf-heading);
  border-left: 3px solid var(--sf-red);
  padding: var(--sf-sp-4) var(--sf-sp-6);
  margin: var(--sf-sp-8) 0;
}
.sf-pullquote .sf-pullquote-author {
  display: block;
  font-size: var(--sf-text-md);
  color: var(--sf-text-secondary);
  margin-top: var(--sf-sp-3);
}

/* ── Stat Block ───────────────────────────────────────────── */
.sf-stat-number {
  font-family: var(--sf-font-heading);
  font-weight: var(--sf-font-weight-light);
  font-size: clamp(var(--sf-text-4xl), 6vw, var(--sf-text-6xl));
  line-height: 1;
  color: var(--sf-red);
  margin: 0 0 var(--sf-sp-2);
}
.sf-stat-label {
  font-size: var(--sf-text-md);
  color: var(--sf-text-secondary);
  text-transform: uppercase;
  letter-spacing: var(--sf-tracking-wide);
}

/* ── Verdict / Dot ────────────────────────────────────────── */
.sf-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: var(--sf-sp-2); vertical-align: middle; }
.sf-dot.red   { background: var(--sf-red); }
.sf-dot.green { background: var(--sf-green); }
.sf-dot.grey  { background: var(--sf-grey); }

/* ── Links ────────────────────────────────────────────────── */
.sf-link {
  color: var(--sf-red);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--sf-transition-fast);
}
.sf-link:hover { border-bottom-color: var(--sf-red); }