/* AnalyticsScholar brand tokens — mirrors AS_TOKENS in design prototype */
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=IBM+Plex+Serif:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=IBM+Plex+Mono:wght@400;500;600&display=swap");

:root {
  --as-navy:          #343f52;
  --as-navy-dark:     #232936;
  --as-coral:         #E66854;
  --as-purple:        #6B5CE7;
  --as-emerald:       #1E8F73;
  --as-muted:         #6B7B8E;
  --as-surface:       #F5F7FA;
  --as-surface-warm:  #FAF7F3;
  --as-border:        rgba(52,63,82,0.10);
  --as-border-strong: rgba(52,63,82,0.18);

  --font-serif: "IBM Plex Serif", Georgia, serif;
  --font-sans:  "IBM Plex Sans", system-ui, sans-serif;
  --font-mono:  "IBM Plex Mono", ui-monospace, monospace;

  /* Bootstrap 5 overrides */
  --bs-body-font-family:    var(--font-sans);
  --bs-body-color:          var(--as-navy);
  --bs-primary:             var(--as-coral);
  --bs-primary-rgb:         230, 104, 84;
  --bs-secondary:           var(--as-navy);
  --bs-secondary-rgb:       52, 63, 82;
  --bs-link-color:          var(--as-coral);
  --bs-link-hover-color:    var(--as-navy);
  --bs-border-color:        var(--as-border);
  --bs-border-radius:       0.5rem;
  --bs-font-monospace:      var(--font-mono);
}

/* Base typography */
body {
  font-family: var(--font-sans);
  color: var(--as-navy);
  background-color: #fff;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--as-navy);
}

/* Utility classes */
.text-navy     { color: var(--as-navy)  !important; }
.text-coral    { color: var(--as-coral) !important; }
.text-muted-as { color: var(--as-muted) !important; }
.bg-navy       { background-color: var(--as-navy)     !important; }
.bg-navy-dark  { background-color: var(--as-navy-dark)!important; }
.bg-coral      { background-color: var(--as-coral)    !important; }
.bg-surface    { background-color: var(--as-surface)  !important; }
.font-serif    { font-family: var(--font-serif) !important; }
.font-mono     { font-family: var(--font-mono)  !important; }

/* Eyebrow label */
.as-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--as-coral);
}

/* Brand button */
.btn-as-primary {
  background-color: var(--as-coral);
  border-color: var(--as-coral);
  color: #fff;
  font-family: var(--font-sans);
  font-weight: 600;
  border-radius: 6px;
  padding: 0.75rem 1.75rem;
}
.btn-as-primary:hover {
  background-color: #d4553f;
  border-color: #d4553f;
  color: #fff;
}

.btn-as-outline {
  background-color: transparent;
  border: 1px solid var(--as-border-strong);
  color: var(--as-navy);
  font-family: var(--font-sans);
  font-weight: 500;
  border-radius: 6px;
  padding: 0.75rem 1.75rem;
}
.btn-as-outline:hover {
  background-color: var(--as-surface);
  color: var(--as-navy);
}

/* Section containers */
.as-section { padding: 5.5rem 0; }
.as-section-sm { padding: 3.5rem 0; }

/* Navy hero gradient */
.as-hero-bg {
  background: linear-gradient(135deg, var(--as-navy-dark) 0%, var(--as-navy) 100%);
}

/* Accent border blockquote */
.as-blockquote {
  border-left: 3px solid var(--as-coral);
  padding-left: 1.5rem;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 1.25rem;
  line-height: 1.55;
  color: var(--as-navy);
}

/* Code blocks */
pre, code {
  font-family: var(--font-mono);
  background-color: var(--as-surface);
  border-radius: 4px;
}
pre {
  padding: 1.25rem;
  border: 1px solid var(--as-border);
  overflow-x: auto;
}
code { padding: 0.1em 0.4em; font-size: 0.875em; }
pre code { padding: 0; background: none; font-size: inherit; }