/* ============================================================================
   ActWithShivani — design tokens + Bootstrap 5 variable overrides.
   Load AFTER bootstrap.min.css and BEFORE style.css.
   Source: ActWithShivani Design System / tokens (colors, typography, radius,
   elevation, motion) translated into Bootstrap's own CSS custom properties.
   ============================================================================ */

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

:root {
  /* ---- Brand tokens -------------------------------------------------- */
  --ink: #171717;
  --charcoal: #242424;
  --graphite: #3D3A37;
  --muted: #77736E;
  --border: #DDD8D0;
  --border-strong: #C4BDB2;
  --sand: #EFE9E0;
  --warm-white: #FAF8F4;
  --white: #FFFFFF;

  --accent: #B45F4D;
  --accent-dark: #8F4537;
  --accent-soft: #F1DDD8;

  --brand-black: #000000;
  --brand-gold: #D8A940;
  --brand-gold-dim: #A8801F;
  --brand-white: #FFFFFF;

  --success: #2E7D5B;
  --warning: #B7791F;
  --error: #B42318;
  --info: #3B6EA8;

  --success-soft: #E4EFE9;
  --warning-soft: #F7EEDC;
  --error-soft: #F7E4E2;
  --info-soft: #E4EBF4;

  --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-sans: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-card: 12px;
  --radius-fn-card: 8px;

  --shadow-card: 0 1px 3px rgba(23, 23, 23, 0.08), 0 1px 2px rgba(23, 23, 23, 0.04);
  --shadow-lift: 0 8px 20px rgba(23, 23, 23, 0.10);
  --shadow-overlay: 0 20px 48px rgba(23, 23, 23, 0.22);

  --space-section: 120px;
  --space-section-tablet: 88px;
  --space-section-mobile: 64px;
  --container-max: 1280px;

  --ease-cinematic: cubic-bezier(.22, .61, .36, 1);

  /* ---- Bootstrap root variables --------------------------------------- */
  --bs-body-font-family: var(--font-sans);
  --bs-body-font-size: 1rem;
  --bs-body-color: var(--ink);
  --bs-body-bg: var(--warm-white);
  --bs-border-color: var(--border);
  --bs-border-radius: var(--radius-fn-card);
  --bs-border-radius-sm: var(--radius-sm);
  --bs-border-radius-lg: var(--radius-card);
  --bs-border-radius-xl: var(--radius-lg);
  --bs-link-color: var(--accent-dark);
  --bs-link-color-rgb: 143, 69, 55;
  --bs-link-hover-color: var(--accent);
  --bs-link-hover-color-rgb: 180, 95, 77;
  --bs-emphasis-color: var(--ink);
  --bs-primary: var(--accent);
  --bs-primary-rgb: 180, 95, 77;
  --bs-secondary: var(--muted);
  --bs-secondary-rgb: 119, 115, 110;
  --bs-success: var(--success);
  --bs-success-rgb: 46, 125, 91;
  --bs-warning: var(--warning);
  --bs-warning-rgb: 183, 121, 31;
  --bs-danger: var(--error);
  --bs-danger-rgb: 180, 35, 24;
  --bs-info: var(--info);
  --bs-info-rgb: 59, 110, 168;
  --bs-focus-ring-color: rgba(180, 95, 77, 0.28);
}

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body { -webkit-font-smoothing: antialiased; }

h1, h2, h3, .display-font {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--ink);
}

h4, h5, h6 { font-family: var(--font-sans); font-weight: 700; color: var(--ink); }

.eyebrow {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-dark);
}
.eyebrow.eyebrow-inverse { color: var(--brand-gold); }
.eyebrow.eyebrow-muted { color: var(--muted); }

/* ---- Buttons ------------------------------------------------------------ */
.btn { border-radius: var(--radius-md); font-weight: 600; font-size: 0.9375rem; padding: 0.65rem 1.25rem; transition: background-color .15s var(--ease-cinematic), border-color .15s var(--ease-cinematic), color .15s var(--ease-cinematic), transform .15s var(--ease-cinematic); }
.btn:active { transform: scale(0.985); }
.btn-lg { padding: 0.85rem 1.75rem; border-radius: var(--radius-md); }
.btn-sm { padding: 0.4rem 0.85rem; border-radius: var(--radius-sm); }

.btn-primary { --bs-btn-bg: var(--accent); --bs-btn-border-color: var(--accent); --bs-btn-color: #fff;
  --bs-btn-hover-bg: var(--accent-dark); --bs-btn-hover-border-color: var(--accent-dark); --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--accent-dark); --bs-btn-active-border-color: var(--accent-dark);
  --bs-btn-focus-shadow-rgb: 180, 95, 77; --bs-btn-disabled-bg: var(--accent); --bs-btn-disabled-border-color: var(--accent); }

.btn-outline-secondary { --bs-btn-color: var(--ink); --bs-btn-border-color: var(--border-strong);
  --bs-btn-hover-bg: rgba(23,23,23,.035); --bs-btn-hover-border-color: var(--border-strong); --bs-btn-hover-color: var(--ink);
  --bs-btn-active-bg: rgba(23,23,23,.06); --bs-btn-active-border-color: var(--border-strong); --bs-btn-active-color: var(--ink); }

.btn-ghost { background: transparent; border: none; color: var(--ink); font-weight: 600; }
.btn-ghost:hover { background: rgba(23,23,23,.035); color: var(--ink); }

.btn-link-arrow { color: var(--accent-dark); font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: .35rem; }
.btn-link-arrow:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

.btn-gold { background: var(--brand-gold); border-color: var(--brand-gold); color: var(--brand-black); font-weight: 700; }
.btn-gold:hover { background: #E8C173; border-color: #E8C173; color: var(--brand-black); }

.btn-inverse { background: var(--warm-white); border-color: var(--warm-white); color: var(--ink); font-weight: 600; }
.btn-inverse:hover { background: #fff; color: var(--ink); }

.btn-outline-light-inverse { background: transparent; border: 1px solid rgba(255,255,255,.32); color: #fff; }
.btn-outline-light-inverse:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.5); color: #fff; }

/* ---- Forms ---------------------------------------------------------- */
.form-control, .form-select {
  border-color: var(--border-strong);
  border-radius: var(--radius-sm);
  min-height: 46px;
  padding: 0.55rem 0.85rem;
  color: var(--ink);
}
.form-control:focus, .form-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(180, 95, 77, 0.20);
}
textarea.form-control { min-height: 120px; }
.form-label { font-weight: 600; font-size: 0.875rem; color: var(--graphite); margin-bottom: 0.35rem; }
.form-text { color: var(--muted); }
.is-invalid ~ .invalid-feedback, .invalid-feedback { font-size: 0.8125rem; }
.form-check-input:checked { background-color: var(--accent); border-color: var(--accent); }
.form-check-input:focus { box-shadow: 0 0 0 3px rgba(180, 95, 77, 0.20); }

/* ---- Badges / status ------------------------------------------------- */
.badge { font-weight: 600; font-size: 0.75rem; letter-spacing: 0.01em; padding: 0.4em 0.7em; border-radius: 999px; }
/* text-bg-success/warning/danger/info already resolve to brand semantic colours
   via the --bs-*-rgb overrides above (solid fill, white text) — used for both
   badges and toasts, so no separate soft-badge treatment is defined here. */
.text-bg-secondary { background-color: var(--sand) !important; color: var(--muted) !important; }
.badge.rounded-pill i, .badge i { font-size: 0.7rem; vertical-align: -1px; }

/* ---- Cards ------------------------------------------------------------ */
.card { border-color: var(--border); box-shadow: none; }
.card.card-marketing { border-radius: var(--radius-card); overflow: hidden; transition: transform .22s var(--ease-cinematic), box-shadow .22s var(--ease-cinematic); }
.card.card-marketing:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.card.card-fn { border-radius: var(--radius-fn-card); }

/* ---- Alerts ------------------------------------------------------------ */
.alert { border: 1px solid transparent; border-radius: var(--radius-fn-card); }
.alert-success { background: var(--success-soft); color: var(--success); border-color: transparent; }
.alert-warning { background: var(--warning-soft); color: var(--warning); border-color: transparent; }
.alert-danger { background: var(--error-soft); color: var(--error); border-color: transparent; }
.alert-info { background: var(--info-soft); color: var(--info); border-color: transparent; }

/* ---- Nav / dropdown ------------------------------------------------- */
.dropdown-menu { border-color: var(--border); box-shadow: var(--shadow-card); border-radius: var(--radius-fn-card); }
.dropdown-item:active, .dropdown-item.active { background-color: var(--accent-soft); color: var(--accent-dark); }

/* ---- Tables (admin) --------------------------------------------------- */
.table { --bs-table-border-color: var(--border); color: var(--ink); }
.table > thead { background: var(--sand); }
.table > thead th { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--graphite); font-weight: 700; border-bottom: 1px solid var(--border); }

/* ---- Accordion (curriculum / FAQ) ------------------------------------- */
.accordion-item { border-color: var(--border); }
.accordion-button { font-weight: 600; color: var(--ink); }
.accordion-button:not(.collapsed) { background: var(--accent-soft); color: var(--accent-dark); box-shadow: none; }
.accordion-button:focus { box-shadow: 0 0 0 3px rgba(180, 95, 77, 0.20); }

/* ---- Modal / offcanvas ------------------------------------------------- */
.modal-content { border-radius: var(--radius-lg); border: none; box-shadow: var(--shadow-overlay); }
.modal-header { border-bottom-color: var(--border); }
.modal-footer { border-top-color: var(--border); }

/* ---- Pagination --------------------------------------------------- */
.page-link { color: var(--ink); border-color: var(--border); }
.page-item.active .page-link { background-color: var(--accent); border-color: var(--accent); }
.page-link:hover { background-color: var(--sand); color: var(--ink); }

/* ---- Dark brand surface (hero / footer / CTA band / portal rails) ----- */
.aws-dark { background: var(--brand-black); color: rgba(255,255,255,.86); }
.aws-dark h1, .aws-dark h2, .aws-dark h3 { color: #fff; }
.aws-dark a { color: var(--brand-gold); }
.aws-dark a:hover { color: #E8C173; }
.aws-dark .eyebrow { color: var(--brand-gold); }
.aws-dark .text-muted { color: rgba(255,255,255,.56) !important; }
.aws-dark hr { border-color: rgba(255,255,255,.14); }