/**
 * Bongofey design tokens (Phase 5).
 * Single source of truth for the light/white theme. Use the variables
 * everywhere; do not hardcode hex values in page files.
 */
:root {
  /* surfaces — white first */
  --bg:            #FFFFFF;
  --surface:       #FAFAF9;
  --surface-2:     #F5F5F4;
  --border:        #E7E5E4;
  --border-strong: #D6D3D1;

  /* text */
  --text:          #1C1917;
  --text-muted:    #78716C;
  --text-subtle:   #A8A29E;

  /* accent — Bongofey amber */
  --accent:        #C97D18;
  --accent-hover:  #A9650F;
  --accent-tint:   #FDF6EC;
  --accent-border: #F0DDBF;

  /* status */
  --success:       #15803D;
  --success-tint:  #F0FDF4;
  --danger:        #B91C1C;
  --danger-tint:   #FEF2F2;

  /* radius */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-pill: 999px;

  /* shadow — barely there */
  --shadow-sm: 0 1px 2px rgba(28,25,23,.04);
  --shadow-md: 0 4px 12px rgba(28,25,23,.06);

  /* layout */
  --container: 1200px;
  --gutter: 20px;
  --section-y: 96px;        /* 56px on mobile */

  /* spacing scale (4px base) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
}

@media (max-width: 767.98px) {
  :root { --section-y: 56px; }
}