/* ========================================================
   SUMMYZE Brand Theme — Instructions Site
   Overrides dark defaults with light brand palette.
   Primary: #453046  BG: #fbf9fc  Font: Inter
   ======================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400&display=swap');

/* ─── CSS Variables ───────────────────────────────────── */
:root {
  --bg:       #fbf9fc;
  --surface:  #ffffff;
  --surface2: #f5f0f5;
  --border:   #eadfea;

  --accent:  #453046;
  --accent2: #5d4060;
  --accent3: #746775;

  --text:    #1f1721;
  --muted:   #746775;
  --warning: #f59e0b;
  --white:   #ffffff;
  --green:   #059669;

  /* brand aliases (used if any page references these) */
  --primary-color: #453046;
  --primary-dark:  #2f1f31;
  --primary-light: #5d4060;
}

/* ─── Base ────────────────────────────────────────────── */
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  background: var(--bg) !important;
  color: var(--text) !important;
}

/* ─── Navbar ──────────────────────────────────────────── */
nav {
  background: rgba(255, 255, 255, 0.97) !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: 0 1px 3px rgba(69, 48, 70, 0.1) !important;
}

.nav-logo span,
.nav-title,
.nav-logo .logo-text {
  color: var(--accent) !important;
}

/* ─── Dropdown button ─────────────────────────────────── */
.dropdown-btn {
  background: var(--surface2) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  font-family: 'Inter', sans-serif !important;
}

.dropdown-btn:hover {
  border-color: var(--accent) !important;
  background: #efe9ef !important;
}

/* ─── Dropdown menu ───────────────────────────────────── */
.dropdown-menu {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 20px 60px rgba(69, 48, 70, 0.15) !important;
}

.dropdown-menu a {
  color: var(--text) !important;
}

.dropdown-menu a:hover {
  background: var(--surface2) !important;
}

.dropdown-menu a.active {
  background: rgba(69, 48, 70, 0.1) !important;
  color: var(--accent) !important;
}

/* ─── Hero ────────────────────────────────────────────── */
.hero h1 {
  color: var(--text) !important;
}

.hero h1 .highlight {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent2) 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

.hero p {
  color: var(--muted) !important;
}

.hero-badge {
  background: rgba(69, 48, 70, 0.07) !important;
  border: 1px solid rgba(69, 48, 70, 0.2) !important;
  color: var(--accent) !important;
}

/* ─── Section headings ────────────────────────────────── */
.section-title,
.section-title * {
  color: var(--text) !important;
  font-family: 'Inter', sans-serif !important;
}

.section-divider {
  background: linear-gradient(to right, var(--border), transparent) !important;
}

/* ─── Steps ───────────────────────────────────────────── */
.step-num {
  background: linear-gradient(135deg, #453046, #2f1f31) !important;
  box-shadow: 0 4px 15px rgba(69, 48, 70, 0.25) !important;
  font-family: 'Inter', sans-serif !important;
}

.step-title {
  color: var(--text) !important;
  font-family: 'Inter', sans-serif !important;
}

.step-list li::before {
  background: var(--accent2) !important;
}

/* ─── Screenshots ─────────────────────────────────────── */
.screenshot {
  border: 1px solid var(--border) !important;
  box-shadow: 0 8px 30px rgba(69, 48, 70, 0.1) !important;
}

.screenshot-label {
  background: rgba(255, 255, 255, 0.9) !important;
  border: 1px solid var(--border) !important;
  color: var(--muted) !important;
  backdrop-filter: blur(4px);
}

/* ─── Info cards ──────────────────────────────────────── */
.info-card {
  background: var(--surface2) !important;
  border: 1px solid var(--border) !important;
}

.info-card:hover {
  border-color: rgba(69, 48, 70, 0.35) !important;
}

.info-card h4 {
  color: var(--text) !important;
  font-family: 'Inter', sans-serif !important;
}

.info-card a {
  color: var(--accent2) !important;
}

/* ─── Guide chips ─────────────────────────────────────── */
.guide-chip {
  background: var(--surface2) !important;
  border: 1px solid var(--border) !important;
  color: var(--muted) !important;
}

.guide-chip:hover {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
  background: rgba(69, 48, 70, 0.06) !important;
}

/* ─── Links ───────────────────────────────────────────── */
.hl-link {
  color: var(--accent2) !important;
  border-bottom-color: rgba(69, 48, 70, 0.3) !important;
}

.hl-link:hover {
  color: var(--accent) !important;
}

/* ─── Tip / warning boxes ─────────────────────────────── */
.tip,
.warning-box,
.note-box,
.instruction-tip,
.callout {
  background: rgba(69, 48, 70, 0.06) !important;
  border-color: rgba(69, 48, 70, 0.2) !important;
  color: var(--text) !important;
}

/* ─── Code blocks ─────────────────────────────────────── */
code,
.code-inline,
.instruction-code-block,
pre {
  background: var(--surface2) !important;
  color: var(--accent) !important;
  border: 1px solid var(--border) !important;
}

/* ─── Tabs (gmail page) ───────────────────────────────── */
.tab-btn {
  background: var(--surface2) !important;
  border: 1px solid var(--border) !important;
  color: var(--muted) !important;
  font-family: 'Inter', sans-serif !important;
}

.tab-btn.active {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
}

/* ─── Provider selector (other email page) ────────────── */
.provider-tab {
  border: 1px solid var(--border) !important;
  background: var(--surface) !important;
  color: var(--muted) !important;
}

.provider-tab.active,
.provider-tab:hover {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}

/* ─── Slack steps badge ───────────────────────────────── */
.step-badge,
.slack-step-num {
  background: linear-gradient(135deg, #453046, #2f1f31) !important;
  box-shadow: 0 4px 12px rgba(69, 48, 70, 0.25) !important;
}

/* ─── Footer ──────────────────────────────────────────── */
footer {
  background: var(--surface2) !important;
  border-top: 1px solid var(--border) !important;
  color: var(--muted) !important;
}

footer a {
  color: var(--accent2) !important;
}

footer a:hover {
  color: var(--accent) !important;
}