/* ═══════════════════════════════════════════════════════════════
   FRESTA DESIGN SYSTEM — fresta-tokens.css
   Single source of truth. Load before any page-specific styles.
   Equivalent to tokens.ts + base component library.
═══════════════════════════════════════════════════════════════ */

/* ── COLOR TOKENS ── */
:root {
  /* Backgrounds */
  --bg:              #111111;
  --bg-card:         #1A1A1A;
  --bg-surface:      #212121;

  /* Text */
  --text-primary:    #F2F0EC;
  --text-secondary:  #B8B4AC;
  --text-muted:      #7A7670;
  --text-label:      #5E5B57;

  /* Signal stages — canonical values, used everywhere */
  --signal-emerging:    #9CAF3A;
  --signal-growing:     #C87432;
  --signal-saturating:  #8A8480;

  /* Badge surfaces */
  --badge-e-bg:      rgba(156,175,58,0.09);
  --badge-e-border:  rgba(156,175,58,0.42);
  --badge-e-text:    #B5C84A;
  --badge-c-bg:      rgba(200,116,50,0.09);
  --badge-c-border:  rgba(200,116,50,0.42);
  --badge-c-text:    #E08A48;
  --badge-s-bg:      rgba(138,132,128,0.09);
  --badge-s-border:  rgba(138,132,128,0.34);
  --badge-s-text:    #AAA6A2;

  /* Borders */
  --border:          rgba(255,255,255,0.08);
  --border-strong:   rgba(255,255,255,0.15);
  --border-accent:   rgba(255,255,255,0.22);

  /* Shadows */
  --shadow-sm:   0 2px 8px rgba(0,0,0,0.28);
  --shadow-md:   0 4px 20px rgba(0,0,0,0.40);
  --shadow-lg:   0 8px 40px rgba(0,0,0,0.56);

  /* Shorthands (legacy compat) */
  --fb:    var(--bg);
  --card:  var(--bg-card);
  --ff:    var(--text-primary);
  --fm:    var(--text-muted);
  --fg:    var(--signal-emerging);
  --fgb:   var(--signal-emerging);
  --orange: var(--signal-growing);
  --gold:  var(--signal-saturating);
  --fbr:   var(--border);
  --card-bg: var(--bg-card);
  --border-color: var(--border);
  --accent-emerging:   var(--signal-emerging);
  --accent-growing:    var(--signal-growing);
  --accent-saturating: var(--signal-saturating);
  --greenb:  rgba(156,175,58,0.10);
  --orangeb: rgba(200,116,50,0.10);
  --goldb:   rgba(184,177,165,0.09);

  /* Typography */
  --font-sans: 'Inter', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', 'Courier New', monospace;

  /* Type scale — px, no surprises */
  --text-2xs:   8px;
  --text-xs:    9px;
  --text-sm:   11px;
  --text-base: 13px;
  --text-md:   15px;
  --text-lg:   18px;
  --text-xl:   22px;
  --text-2xl:  28px;
  --text-3xl:  40px;

  /* ── Editorial Hierarchy — report content levels ──
     L1 Thesis · L2 Insight · L3 Analysis · L4 Evidence · L5 Metadata */

  /* L1 — Thesis: dominant assertions, section conclusions */
  --r-l1-size:   clamp(28px, 3.8vw, 48px);
  --r-l1-weight: 400;
  --r-l1-lh:     1.2;
  --r-l1-ls:     -0.03em;
  --r-l1-color:  var(--text-primary);
  --r-l1-max-w:  680px;
  --r-l1-mb:     48px;
  --r-l1-mt:     96px;

  /* L2 — Insight: key claims, section openers, definitions */
  --r-l2-size:   clamp(17px, 1.8vw, 20px);
  --r-l2-weight: 400;
  --r-l2-lh:     1.75;
  --r-l2-ls:     0em;
  --r-l2-color:  var(--text-primary);
  --r-l2-max-w:  600px;
  --r-l2-mb:     64px;
  --r-l2-mt:     48px;

  /* L3 — Analysis: interpretive prose, contextual body */
  --r-l3-size:   15px;
  --r-l3-weight: 300;
  --r-l3-lh:     1.75;
  --r-l3-ls:     0em;
  --r-l3-color:  var(--text-secondary);
  --r-l3-max-w:  560px;
  --r-l3-mb:     48px;
  --r-l3-mt:     32px;

  /* L4 — Evidence: supporting data, field observations */
  --r-l4-size:   13px;
  --r-l4-weight: 400;
  --r-l4-lh:     1.65;
  --r-l4-ls:     0em;
  --r-l4-color:  var(--text-secondary);
  --r-l4-max-w:  600px;
  --r-l4-mb:     0px;
  --r-l4-mt:     24px;

  /* L5 — Metadata: labels, sources, captions */
  --r-l5-size:   9px;
  --r-l5-weight: 400;
  --r-l5-lh:     1.4;
  --r-l5-ls:     0.16em;
  --r-l5-color:  var(--text-label);
  --r-l5-font:   var(--font-mono);

  /* Spacing (4px grid) */
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-7:  28px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-14: 56px;

  /* Layout */
  --page-px:      24px;
  --content-max:  800px;
  --sidebar-w:    240px;
  --form-max:     560px;

  /* Border radius */
  --radius-xs:  2px;
  --radius-sm:  3px;
  --radius-md:  6px;
  --radius-lg: 12px;

  /* Transitions */
  --t-fast:   0.12s ease;
  --t-base:   0.18s ease;
  --t-slow:   0.28s cubic-bezier(0.32, 0, 0.15, 1);

  /* Z-index */
  --z-base:    1;
  --z-sticky: 10;
  --z-header: 100;
  --z-modal:  200;
  --z-tip:    300;
}

/* ── BASE ── */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); }
body {
  background: var(--bg);
  color: var(--text-primary);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font-family: inherit; }
button { cursor: pointer; border: none; background: none; }

/* ── SCROLLBAR ── */
* { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.10) transparent; }
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 2px; }


/* ═══════════════════════════════════════════════
   COMPONENT CLASSES
   These are the shared "component library".
   Use .f- prefix to avoid collision with page CSS.
═══════════════════════════════════════════════ */

/* ── AppShell / PageContainer ── */
.f-page {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--sp-14) var(--page-px) 100px;
}
@media (max-width: 640px) {
  .f-page { padding-top: var(--sp-10); padding-left: var(--sp-5); padding-right: var(--sp-5); }
}

/* ── PageTitle ── */
.f-page-title {
  font-family: var(--font-sans);
  font-size: var(--text-2xl);
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.1;
  color: var(--text-primary);
  margin: 0 0 var(--sp-3);
}

/* ── PageSubtitle ── */
.f-page-sub {
  font-size: var(--text-base);
  line-height: 1.55;
  color: var(--text-muted);
  max-width: 480px;
}

/* ── Eyebrow (small colored label above title) ── */
.f-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--signal-emerging);
  margin-bottom: var(--sp-2);
}

/* ── SectionLabel ── */
.f-lbl {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--sp-2);
  display: block;
}

/* ── SectionBlock ── */
.f-section {
  margin-bottom: var(--sp-7);
}

/* ── Body text ── */
.f-body {
  font-size: var(--text-md);
  line-height: 1.6;
  color: var(--text-primary);
}
.f-body-sm {
  font-size: var(--text-base);
  line-height: 1.55;
  color: var(--text-secondary);
}

/* ── Divider ── */
.f-divider {
  height: 0.5px;
  background: var(--border);
  border: none;
  margin: var(--sp-8) 0;
}

/* ── PageHeader block ── */
.f-page-header {
  margin-bottom: var(--sp-14);
  padding-bottom: var(--sp-6);
  border-bottom: 0.5px solid var(--border);
}


/* ── SignalBadge ── */
.f-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  padding: 0 10px;
  border-radius: var(--radius-xs);
  border: 0.5px solid;
  white-space: nowrap;
  line-height: 1;
}
.f-badge-e { background: var(--badge-e-bg); border-color: var(--badge-e-border); color: var(--badge-e-text); }
.f-badge-c { background: var(--badge-c-bg); border-color: var(--badge-c-border); color: var(--badge-c-text); }
.f-badge-s { background: var(--badge-s-bg); border-color: var(--badge-s-border); color: var(--badge-s-text); }

/* existing .bdg system — keep in sync */
.bdg { font-family: var(--font-mono); font-size: var(--text-xs); padding: 3px 9px; border-radius: var(--radius-sm); border: 0.5px solid; letter-spacing: 0.06em; font-weight: 500; }
.bdg-e { border-color: var(--badge-e-border); color: var(--badge-e-text); background: var(--badge-e-bg); }
.bdg-c { border-color: var(--badge-c-border); color: var(--badge-c-text); background: var(--badge-c-bg); }
.bdg-s { border-color: var(--badge-s-border); color: var(--badge-s-text); background: var(--badge-s-bg); }


/* ── CTAButton ── */
.f-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 10px var(--sp-5);
  border: 0.5px solid var(--border-strong);
  border-radius: var(--radius-xs);
  color: var(--text-primary);
  background: transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
  white-space: nowrap;
  line-height: 1;
}
.f-btn:hover {
  background: rgba(255,255,255,0.05);
  border-color: var(--border-accent);
}
.f-btn-accent {
  border-color: var(--badge-e-border);
  color: var(--badge-e-text);
}
.f-btn-accent:hover {
  background: var(--badge-e-bg);
  border-color: var(--signal-emerging);
  color: var(--signal-emerging);
}


/* ── TagPill ── */
.f-tag {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  padding: 3px 10px;
  border: 0.5px solid var(--border);
  border-radius: var(--radius-xs);
  color: var(--text-muted);
  background: rgba(255,255,255,0.03);
  white-space: nowrap;
  display: inline-block;
}


/* ── MetricPanel / MetricRow ── */
.f-metric-panel {
  display: flex;
  gap: var(--sp-7);
  flex-wrap: wrap;
  padding: var(--sp-3) 0;
  border-top: 0.5px solid var(--border);
  border-bottom: 0.5px solid var(--border);
}
.f-metric-val {
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--text-primary);
}
.f-metric-lbl {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 3px;
}


/* ── TextLink ── */
.f-link {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: 0.07em;
  color: var(--text-muted);
  transition: color var(--t-fast);
}
.f-link:hover { color: var(--text-primary); }


/* ── NavigationArrows ── */
.f-nav-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-decoration: none;
  transition: color var(--t-fast);
}
.f-nav-arrow:hover { color: var(--text-primary); }


/* ── ConnPill (signal connections) ── */
.conn-pill {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  padding: 4px 11px;
  border: 0.5px solid var(--border);
  border-radius: var(--radius-xs);
  color: var(--text-muted);
  background: rgba(255,255,255,0.03);
  text-decoration: none;
  transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast);
  display: inline-block;
}
.conn-pill:hover {
  border-color: var(--border-strong);
  color: var(--text-primary);
  background: rgba(255,255,255,0.05);
}

/* ── Origin / source pills ── */
.origin-pill {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  padding: 3px 10px;
  border: 0.5px solid var(--border);
  border-radius: var(--radius-xs);
  color: var(--text-muted);
  background: rgba(255,255,255,0.03);
  display: inline-block;
}


/* ── SideCard (signal page sidebar blocks) ── */
.side-card {
  padding: var(--sp-4) 0;
  border-bottom: 0.5px solid var(--border);
}
.side-card:first-child { padding-top: var(--sp-2); }
.side-card:last-child { border-bottom: none; }
.side-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--sp-3);
  display: block;
  cursor: default;
}


/* ── Microinteractions ── */
@keyframes f-fade-up {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: translateY(0); }
}
.f-reveal { animation: f-fade-up 0.28s ease both; }

@keyframes f-pulse-dot {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.38; }
}
.f-live-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--signal-emerging);
  animation: f-pulse-dot 2.4s ease-in-out infinite;
  display: inline-block;
}


/* ── Research / card modules (editorial, not SaaS) ── */
.f-module {
  padding: var(--sp-6) 0;
  border-bottom: 0.5px solid var(--border);
}
.f-module:first-child { border-top: 0.5px solid var(--border); }
.f-module-title {
  font-size: var(--text-base);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin: 0 0 var(--sp-2);
}
.f-module-body {
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--text-secondary);
}


/* ── System metadata strip ── */
.f-sys-meta {
  display: flex;
  gap: var(--sp-6);
  flex-wrap: wrap;
  padding: var(--sp-5) 0;
  border-top: 0.5px solid var(--border);
}
.f-sys-meta-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.f-sys-meta-val {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  letter-spacing: 0.04em;
}
.f-sys-meta-lbl {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-label);
}

/* ── PAGE TYPOGRAPHY · Padrão B ── */
.page-wrap {
  max-width: 640px;
  margin: 0 auto;
  padding: 52px 24px 80px;
}
.page-back {
  display: block;
  margin-bottom: 36px;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: 0.08em;
  color: var(--text-muted);
  transition: color 0.12s;
}
.page-back:hover { color: var(--text-primary); }
.page-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
  color: var(--signal-emerging);
  margin: 0 0 24px;
}
.page-title {
  font-size: var(--text-xl);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin: 0 0 12px;
}
.page-subtitle {
  font-size: var(--text-md);
  line-height: 1.65;
  color: var(--text-secondary);
  margin: 0 0 28px;
}
.page-body {
  font-size: var(--text-md);
  line-height: 1.7;
  color: var(--text-secondary);
  margin: 0 0 20px;
}
.page-section-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
  color: var(--text-muted);
  margin: 0 0 16px;
}
.page-item-title {
  font-size: var(--text-md);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin: 0 0 8px;
}
.page-divider {
  height: 0.5px;
  background: var(--border-color);
  margin: 32px 0;
  border: none;
}
.page-link {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: 0.06em;
  color: var(--signal-emerging);
  transition: opacity 0.12s;
}
.page-link:hover { opacity: 0.7; }
@media (max-width: 640px) {
  .page-wrap { padding: 36px 20px 60px; }
  .page-title { font-size: var(--text-lg); }
}


/* ── Editorial Level Utilities (report) ──
   Apply to any element to inherit the correct level typography.
   Layout (max-width, margin, padding) remains on component classes. */
.r-l1 {
  font-size:      var(--r-l1-size);
  font-weight:    var(--r-l1-weight);
  line-height:    var(--r-l1-lh);
  letter-spacing: var(--r-l1-ls);
  color:          var(--r-l1-color);
}
.r-l2 {
  font-size:      var(--r-l2-size);
  font-weight:    var(--r-l2-weight);
  line-height:    var(--r-l2-lh);
  letter-spacing: var(--r-l2-ls);
  color:          var(--r-l2-color);
}
.r-l3 {
  font-size:      var(--r-l3-size);
  font-weight:    var(--r-l3-weight);
  line-height:    var(--r-l3-lh);
  letter-spacing: var(--r-l3-ls);
  color:          var(--r-l3-color);
}
.r-l4 {
  font-size:      var(--r-l4-size);
  font-weight:    var(--r-l4-weight);
  line-height:    var(--r-l4-lh);
  letter-spacing: var(--r-l4-ls);
  color:          var(--r-l4-color);
}
.r-l5 {
  font-family:    var(--r-l5-font);
  font-size:      var(--r-l5-size);
  font-weight:    var(--r-l5-weight);
  line-height:    var(--r-l5-lh);
  letter-spacing: var(--r-l5-ls);
  color:          var(--r-l5-color);
  text-transform: uppercase;
}