/* 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&family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&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; }

/* ── Arabic (IBM Plex Sans Arabic) ──────────────────────────────────────────── */
[lang="ar"] {
  --font-sans:  "IBM Plex Sans Arabic", system-ui, sans-serif;
  --font-serif: "IBM Plex Sans Arabic", system-ui, sans-serif;
}
/* Headings: weight-based hierarchy replaces serif distinction */
[lang="ar"] h1,
[lang="ar"] h2,
[lang="ar"] h3,
[lang="ar"] h4,
[lang="ar"] h5,
[lang="ar"] h6,
[lang="ar"] .font-serif {
  font-family: "IBM Plex Sans Arabic", system-ui, sans-serif;
  letter-spacing: 0;
}
/* Arabic body needs more vertical breathing room */
[lang="ar"] p,
[lang="ar"] li,
[lang="ar"] .as-rich-body {
  line-height: 1.85;
  letter-spacing: 0;
}
/* Neutralise negative letter-spacing on all elements */
[lang="ar"] * {
  letter-spacing: 0 !important;
}
/* Eyebrow labels: remove mono font for Arabic (IBM Plex Mono has no Arabic) */
[lang="ar"] .as-eyebrow {
  font-family: "IBM Plex Sans Arabic", system-ui, sans-serif;
  letter-spacing: 0.06em;
}

/* ── RTL layout overrides ────────────────────────────────────────────────────── */
/* Breadcrumb separators flip direction */
[dir="rtl"] .breadcrumb { flex-direction: row-reverse; }

/* CTA arrows: rotate → to ← in RTL context */
[dir="rtl"] .btn-as-primary::after,
[dir="rtl"] .btn-as-outline::after { content: none; }

/* Blockquote accent moves to right side in RTL */
[dir="rtl"] .as-blockquote {
  border-left: none;
  border-right: 3px solid var(--as-coral);
  padding-left: 0;
  padding-right: 1.5rem;
}