/* ============================================
   STRATALIS — Design Tokens
   Strategic Investment & Economic Security
   ============================================ */

:root {
  /* ---------- BRAND COLORS ---------- */
  --st-navy:        #1C2B3A;   /* Primary — institutional */
  --st-navy-deep:   #131F2A;   /* Hover / depth */
  --st-navy-soft:   #2A3B4D;

  --st-terracotta:  #C4642A;   /* Accent — used sparingly */
  --st-terracotta-deep: #A8521E;
  --st-terracotta-soft: #E2A57A;

  --st-grey-700:    #4A5560;
  --st-grey-500:    #A8ACB1;   /* Logo band 3 */
  --st-grey-300:    #DCDCDC;   /* Logo band 4 */
  --st-grey-100:    #EFEEEA;
  --st-grey-50:     #F7F6F2;

  --st-paper:       #FBFAF6;   /* Off-white base */
  --st-ink:         #1C2B3A;   /* Body text = navy */
  --st-ink-soft:    #4A5560;
  --st-line:        #E5E2DA;

  /* ---------- TYPE ---------- */
  --st-sans:  "Helvetica Neue", "Arial", "Liberation Sans", system-ui, sans-serif;
  --st-serif: "Garamond", "EB Garamond", "Adobe Garamond Pro", "Georgia", serif;
  --st-mono:  "SF Mono", "Menlo", "Consolas", "Courier New", monospace;

  /* Modular scale (1.250 — major third) */
  --st-fs-xs:   12px;
  --st-fs-sm:   13px;
  --st-fs-base: 15px;
  --st-fs-md:   18px;
  --st-fs-lg:   22px;
  --st-fs-xl:   28px;
  --st-fs-2xl:  36px;
  --st-fs-3xl:  48px;
  --st-fs-4xl:  64px;
  --st-fs-5xl:  84px;

  /* ---------- SPACING (8pt grid) ---------- */
  --st-1: 4px;
  --st-2: 8px;
  --st-3: 12px;
  --st-4: 16px;
  --st-5: 24px;
  --st-6: 32px;
  --st-7: 48px;
  --st-8: 64px;
  --st-9: 96px;
  --st-10: 128px;

  /* ---------- LINES & MOTION ---------- */
  --st-radius: 0px;       /* Sharp corners — no rounding */
  --st-radius-sm: 1px;
  --st-border: 1px solid var(--st-line);
  --st-border-strong: 1px solid var(--st-navy);
  --st-shadow-card: 0 1px 0 rgba(28,43,58,0.04), 0 12px 32px -16px rgba(28,43,58,0.18);
  --st-ease: cubic-bezier(0.2, 0.6, 0.2, 1);
}

/* ---------- BASE ---------- */
html, body { background: var(--st-paper); color: var(--st-ink); }
body {
  font-family: var(--st-sans);
  font-size: var(--st-fs-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
* { box-sizing: border-box; }

/* ---------- TYPE STYLES ---------- */
.st-eyebrow {
  font-family: var(--st-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--st-terracotta);
}
.st-display {
  font-family: var(--st-sans);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.05;
}
.st-h1 { font-size: var(--st-fs-3xl); font-weight: 300; letter-spacing: -0.015em; line-height: 1.1; }
.st-h2 { font-size: var(--st-fs-2xl); font-weight: 400; letter-spacing: -0.01em; line-height: 1.15; }
.st-h3 { font-size: var(--st-fs-xl);  font-weight: 500; letter-spacing: -0.005em; line-height: 1.2; }
.st-h4 { font-size: var(--st-fs-lg);  font-weight: 500; line-height: 1.3; }
.st-body { font-size: var(--st-fs-base); line-height: 1.6; }
.st-small { font-size: var(--st-fs-sm); color: var(--st-ink-soft); }
.st-caption { font-size: var(--st-fs-xs); letter-spacing: 0.05em; text-transform: uppercase; color: var(--st-ink-soft); }

/* ---------- RULES ---------- */
.st-rule        { height: 1px; background: var(--st-line); border: 0; }
.st-rule-strong { height: 1px; background: var(--st-navy); border: 0; }
.st-rule-accent { height: 2px; width: 48px; background: var(--st-terracotta); border: 0; }

/* ---------- BUTTONS ---------- */
.st-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 22px;
  font-family: var(--st-sans);
  font-size: 13px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  background: var(--st-navy); color: var(--st-paper);
  border: 1px solid var(--st-navy);
  cursor: pointer; text-decoration: none;
  transition: background 180ms var(--st-ease), color 180ms var(--st-ease);
}
.st-btn:hover { background: var(--st-navy-deep); }
.st-btn--ghost { background: transparent; color: var(--st-navy); }
.st-btn--ghost:hover { background: var(--st-navy); color: var(--st-paper); }
.st-btn--accent { background: var(--st-terracotta); border-color: var(--st-terracotta); }
.st-btn--accent:hover { background: var(--st-terracotta-deep); border-color: var(--st-terracotta-deep); }

/* ---------- LOGO MARK (CSS, no SVG) ---------- */
.st-mark {
  display: inline-grid; gap: 3px;
  width: 40px;
}
.st-mark > i {
  display: block; height: 6px;
  background: var(--st-navy);
}
.st-mark > i:nth-child(1) { background: var(--st-navy);       width: 88%; }
.st-mark > i:nth-child(2) { background: var(--st-terracotta); width: 100%; height: 14px; }
.st-mark > i:nth-child(3) { background: var(--st-grey-500);   width: 96%; }
.st-mark > i:nth-child(4) { background: var(--st-grey-300);   width: 80%; height: 4px; }

.st-mark--sm { width: 22px; }
.st-mark--sm > i { height: 3px; }
.st-mark--sm > i:nth-child(2) { height: 8px; }
.st-mark--sm > i:nth-child(4) { height: 2px; }

.st-mark--lg { width: 96px; }
.st-mark--lg > i { height: 14px; }
.st-mark--lg > i:nth-child(2) { height: 32px; }
.st-mark--lg > i:nth-child(4) { height: 9px; }

/* ---------- LOCKUP (mark + wordmark) ---------- */
.st-lockup {
  display: inline-flex; flex-direction: column; align-items: center; gap: 12px;
}
.st-lockup .st-wordmark {
  font-family: var(--st-sans);
  font-weight: 500;
  letter-spacing: 0.32em;
  font-size: 18px;
  color: var(--st-navy);
}
.st-lockup .st-baseline {
  font-family: var(--st-sans);
  font-weight: 500;
  letter-spacing: 0.18em;
  font-size: 8px;
  color: var(--st-navy);
  text-transform: uppercase;
}
.st-lockup--horizontal {
  flex-direction: row; align-items: center; gap: 16px;
}
.st-lockup--horizontal .st-wordmark { font-size: 14px; }
.st-lockup--horizontal .text { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.st-lockup--horizontal .st-baseline { font-size: 7px; }