/* ============================================================
   AIDG BLOCKS — SHARED DESIGN SYSTEM v2.0
   Brand colors extracted from AI Digital Guides logo
   ============================================================ */

/* ---- Material Icons ---- */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  display: inline-block;
  vertical-align: middle;
  line-height: 1;
  font-size: inherit;
}

:root {
  /* ── Logo Brand Colors ── */
  --navy:            #02335d;   /* primary - matches Stitch #02335d */
  --navy-container:  #234a75;
  --navy-light:      #d3e4ff;
  --orange:          #ffa15e;   /* tertiary accent - logo orange */
  --orange-dark:     #753700;
  --sky:             #00658d;   /* secondary */
  --sky-container:   #41befd;
  --sky-light:       #c6e7ff;

  /* ── Surfaces ── */
  --bg:              #f9f9fd;
  --surface:         #f9f9fd;
  --surface-low:     #f4f3f7;
  --surface-card:    #ffffff;
  --surface-mid:     #eeedf2;
  --surface-high:    #e8e8ec;
  --surface-highest: #e2e2e6;

  /* ── Text ── */
  --text:            #1a1c1f;
  --text-muted:      #43474f;
  --text-subtle:     #73777f;

  /* ── Borders ── */
  --border:          #c3c6d0;
  --border-subtle:   #e2e2e6;

  /* ── Type ── */
  --font-head: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-body: 'Geist', system-ui, sans-serif;

  /* ── Spacing ── */
  --section-gap: 80px;
  --gutter:      24px;
  --max-w:       1280px;
  --radius:      8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
}

/* ── Base ── */
.aidg-container {
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: 80px;
}
@media (max-width: 1024px) { .aidg-container { padding-inline: 40px; } }
@media (max-width: 640px)  { .aidg-container { padding-inline: 20px; } }

/* ── Buttons ── */
.aidg-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  padding: 14px 28px;
  border-radius: var(--radius);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s;
}
.aidg-btn-primary {
  background: var(--navy);
  color: #fff;
  box-shadow: 0 4px 20px rgba(2,51,93,0.25);
}
.aidg-btn-primary:hover { filter: brightness(1.1); transform: translateY(-1px); }
.aidg-btn-outline {
  background: transparent;
  color: var(--navy);
  border: 2px solid var(--navy);
}
.aidg-btn-outline:hover { background: rgba(2,51,93,0.05); }
.aidg-btn-orange {
  background: var(--orange);
  color: var(--orange-dark);
  font-weight: 700;
}
.aidg-btn-orange:hover { filter: brightness(1.06); transform: translateY(-1px); }

/* ── Badge ── */
.aidg-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 14px;
  border-radius: 9999px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.aidg-pill-navy  { background: rgba(2,51,93,0.1); color: var(--navy); border: 1px solid rgba(2,51,93,0.2); }
.aidg-pill-sky   { background: rgba(0,101,141,0.1); color: var(--sky); border: 1px solid rgba(0,101,141,0.2); }
.aidg-pill-orange{ background: rgba(255,161,94,0.15); color: var(--orange-dark); border: 1px solid rgba(255,161,94,0.3); }

/* ── Cards ── */
.aidg-card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  transition: border-color 0.25s, box-shadow 0.25s, transform 0.2s;
}
.aidg-card:hover {
  border-color: rgba(2,51,93,0.3);
  box-shadow: 0 10px 30px rgba(2,51,93,0.10);
  transform: translateY(-4px);
}

/* ── Gradient border top ── */
.aidg-gradient-top { position: relative; }
.aidg-gradient-top::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--navy), var(--orange));
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

/* ── Section label ── */
.aidg-label {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--navy);
}

/* ── Link arrow ── */
.aidg-arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: gap 0.15s;
}
.aidg-arrow-link:hover { gap: 10px; }

/* ── TOC sidebar link ── */
.aidg-toc-link {
  display: block;
  padding: 6px 0 6px 16px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  color: var(--text-muted);
  border-left: 2px solid transparent;
  transition: all 0.2s;
}
.aidg-toc-link:hover, .aidg-toc-link.is-active {
  color: var(--sky);
  border-left-color: var(--sky);
  font-weight: 600;
}