/* ============================================================
   Books & Beyond v2.0 — Design System Tokens
   FC-001 — variables.css
   Source: extracted from v1 site audit (style.css, dashboard.css)
   All new CSS MUST use these variables — zero hardcoded hex.
   ============================================================ */

:root {

  /* ── BRAND COLORS (from v1 audit) ──────────────────────────
     Primary: dusty green (#9DB5A0) — the site's distinctive
     navbar and brand identity color.
     Secondary: saddle brown (#A0522D) — warm earthy accent.
     Accent/CTA: gold (#F4D03F) — all call-to-action elements.
  ─────────────────────────────────────────────────────────── */
  --bb-primary:        #9DB5A0;
  --bb-primary-dark:   #7A9481;
  --bb-secondary:      #A0522D;
  --bb-secondary-dark: #7A3D1F;
  --bb-accent:         #F4D03F;
  --bb-accent-hover:   #E2B114;

  /* ── PAGE & SURFACE BACKGROUNDS ──────────────────────────── */
  --bb-bg:             #FDF5E6;   /* cream page background */
  --bb-surface:        #FFF7EF;   /* light card / panel */
  --bb-surface-warm:   #FFFDF8;   /* warmer card surface */
  --bb-surface-white:  #FFFFFF;   /* pure white surface */

  /* ── TEXT ─────────────────────────────────────────────────── */
  --bb-text:           #4B3621;   /* dark brown — primary body text */
  --bb-text-dark:      #2C3E50;   /* dark navy — brand/headings */
  --bb-text-muted:     #8D6E63;   /* medium brown — secondary text */
  --bb-text-white:     #FFFFFF;

  /* ── BORDERS ─────────────────────────────────────────────── */
  --bb-border:         #E0D4C1;   /* standard tan border */
  --bb-border-light:   #F0E9DD;   /* lighter border for cards */

  /* ── NAVIGATION ──────────────────────────────────────────── */
  --bb-dropdown-bg:    #F9F1E7;
  --bb-dropdown-hover: #E8D8C8;
  --bb-sidebar-hover:  rgba(244, 208, 63, 0.25);  /* gold at 25% opacity */

  /* ── SECTION BACKGROUNDS ─────────────────────────────────── */
  --bb-section-dark:   #4B3621;   /* dark section / footer */
  --bb-quote-bg:       #FBE9E7;   /* quote / highlight coral */
  --bb-quote-text:     #5D4037;
  --bb-library-from:   #8D6E63;   /* library gradient start */
  --bb-library-to:     #4E342E;   /* library gradient end */
  --bb-management-bg:  #FFFAF3;
  --bb-founders-bg:    #FFF9F2;

  /* ── STATUS COLORS — do not change ───────────────────────── */
  --bb-success:        #22c55e;
  --bb-warning:        #f59e0b;
  --bb-danger:         #ef4444;
  --bb-info:           #3b82f6;

  /* ── SCHOOL / PROJECT STATUS BADGES ─────────────────────── */
  --status-waitlist:        #94a3b8;
  --status-planning:        #f59e0b;
  --status-fundraising:     #f97316;
  --status-book-drive:      #8b5cf6;
  --status-infrastructure:  #3b82f6;
  --status-active:          #22c55e;
  --status-completed:       #0d9488;

  /* ── TYPOGRAPHY ───────────────────────────────────────────── */
  --bb-font-display: 'Nunito', 'Segoe UI', sans-serif;   /* headings — rounded, warm */
  --bb-font-body:    'Lato', 'Segoe UI', sans-serif;     /* body — clean, readable */

  /* ── SHAPE & SHADOW ──────────────────────────────────────── */
  --bb-radius:    0.75rem;
  --bb-radius-lg: 1.25rem;
  --bb-shadow:    0 2px 12px rgba(0, 0, 0, 0.08);
  --bb-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12);

  /* ── NAVBAR ───────────────────────────────────────────────── */
  --bb-navbar-height: 76px;   /* desktop: logo 56px + 0.5rem padding ×2 */

  /* ── SECTION TINTS ───────────────────────────────────────── */
  /* Very light washes used to distinguish sections that fall
     between the cream (#FDF5E6) and dark (#4B3621) blocks */
  --bb-section-green-light:  rgba(157, 181, 160, 0.10);   /* faint primary tint */
  --bb-section-brown-light:  rgba(160, 82, 45, 0.06);     /* faint secondary tint */
  --bb-section-white:        #FFFFFF;
}

/* Mobile navbar is shorter: logo 45px + 0.2rem padding ×2 ≈ 52px.
   Override the variable so body.page-no-hero and hero margin-top
   both use the correct height on small screens. */
@media (max-width: 576px) {
  :root {
    --bb-navbar-height: 52px;
  }
}