/*
 * Shared Bingwa Flash design system variables.
 * Palette strictly uses Safaricom Green, Vivid Yellow/Gold, Pure Black, and Crisp White.
 * Zero bluish tints. Flat, high-contrast, professional presentation.
 */
:root {
  --bf-green: #15a76c;            /* Safaricom Green */
  --bf-green-strong: #0d8d59;     /* Deep Green for contrast/active states */
  --bf-yellow: #facc15;           /* Bright gold-yellow */
  --bf-yellow-strong: #eab308;    /* Deep Gold for borders/contrast */
  --bf-red: #ef4444;              /* Error red */
  --bf-radius-sm: 8px;
  --bf-radius: 12px;
  --bf-radius-lg: 16px;
  --bf-radius-xl: 20px;
  --bf-pill: 999px;
  --bf-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-theme="dark"] {
  --bf-bg: #060907;               /* Pure deep black/dark-green tone */
  --bf-surface: #0e1410;          /* Deep pitch card surface */
  --bf-surface-raised: #16201a;   /* Raised card surface / hover */
  --bf-surface-muted: #0a0e0b;    /* Input or subtle background */
  --bf-border: #1c2720;           /* Crisp 1px border */
  --bf-border-strong: #27382d;    /* Field border */
  --bf-text: #ffffff;             /* Pure white text */
  --bf-text-muted: #a1a8a3;       /* Secondary body text */
  --bf-text-soft: #6b756e;        /* Muted helper text */
  --bf-header: #060907;
  --bf-selection: rgba(21, 167, 108, 0.15);
  --bf-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  --bf-icon-badge-green: rgba(21, 167, 108, 0.18);
  --bf-icon-badge-yellow: rgba(250, 204, 21, 0.18);
  --bf-icon-badge-neutral: rgba(255, 255, 255, 0.08);
  color-scheme: dark;
}

[data-theme="light"] {
  --bf-bg: #ffffff;               /* Pure white light background */
  --bf-surface: #fbfcfb;          /* Soft white card surface */
  --bf-surface-raised: #f2f4f2;   /* Soft hover surface */
  --bf-surface-muted: #f7f9f7;    /* Subtle field background */
  --bf-border: #e2e6e3;           /* Clean light border */
  --bf-border-strong: #cbcfcc;    /* Field border */
  --bf-text: #0a0e0b;             /* Pure dark text */
  --bf-text-muted: #4b554e;       /* Secondary dark text */
  --bf-text-soft: #8a948d;        /* Muted helper text */
  --bf-header: #ffffff;
  --bf-selection: rgba(21, 167, 108, 0.1);
  --bf-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
  --bf-icon-badge-green: #ecfdf5;
  --bf-icon-badge-yellow: #fefce8;
  --bf-icon-badge-neutral: #f3f4f6;
  color-scheme: light;
}

/* Base resets & typography */
html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  margin: 0;
  padding: 0;
}

body {
  background: var(--bf-bg) !important;
  color: var(--bf-text) !important;
  font-family: "DM Sans", "Nunito", ui-sans-serif, system-ui, sans-serif;
  transition: background-color 0.2s ease, color 0.2s ease;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Ensure no retro clay gradients or heavy custom background decorations */
body::before { content: none !important; display: none !important; }
body * { box-shadow: none; }

a {
  text-underline-offset: 3px;
  color: var(--bf-green);
  transition: var(--bf-transition);
}
a:hover {
  color: var(--bf-green-strong);
}

/* Shared Header Navigation */
header {
  height: 68px !important;
  padding: 0 max(20px, calc((100vw - 1140px) / 2)) !important;
  background: var(--bf-header) !important;
  border-bottom: 1px solid var(--bf-border) !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo img, .ft-logo img {
  border-radius: 8px !important;
  width: 32px;
  height: 32px;
  object-fit: contain;
}
.logo-text, .ft-name {
  color: var(--bf-text) !important;
  font-weight: 700;
}
.logo-text b {
  color: var(--bf-green) !important;
}

/* Shared theme switch button - Pure black or yellowish */
.thm, .page-theme, .home-theme {
  width: 38px !important;
  height: 38px !important;
  border-radius: 8px !important;
  background: var(--bf-surface) !important;
  border: 1px solid var(--bf-border) !important;
  color: var(--bf-yellow) !important;
  display: inline-grid !important;
  place-items: center !important;
  cursor: pointer !important;
  transition: var(--bf-transition) !important;
}
.thm:hover, .page-theme:hover, .home-theme:hover {
  color: var(--bf-yellow-strong) !important;
  border-color: var(--bf-yellow) !important;
  background: var(--bf-surface-raised) !important;
}

/* Shared Button Styles */
.btn-primary, .button-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  background: var(--bf-green) !important;
  color: #ffffff !important;
  font-weight: 700;
  border-radius: var(--bf-pill);
  border: 1px solid var(--bf-green-strong) !important;
  cursor: pointer;
  text-decoration: none;
  transition: var(--bf-transition);
}
.btn-primary:hover, .button-primary:hover {
  background: var(--bf-green-strong) !important;
}

.btn-secondary, .button-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  background: var(--bf-surface) !important;
  color: var(--bf-text) !important;
  font-weight: 700;
  border-radius: var(--bf-pill);
  border: 1px solid var(--bf-border) !important;
  cursor: pointer;
  text-decoration: none;
  transition: var(--bf-transition);
}
.btn-secondary:hover, .button-secondary:hover {
  background: var(--bf-surface-raised) !important;
  border-color: var(--bf-border-strong) !important;
}

/* Shared Card and Container Elements */
.card, .container-card {
  background: var(--bf-surface) !important;
  border: 1px solid var(--bf-border) !important;
  border-radius: var(--bf-radius-lg) !important;
  box-shadow: var(--bf-shadow) !important;
}

/* Shared Input and Form Controls */
input[type="text"], input[type="tel"], input[type="search"], input[type="email"], input[type="password"], textarea, select {
  background: var(--bf-surface-muted) !important;
  border: 1px solid var(--bf-border-strong) !important;
  border-radius: var(--bf-radius-sm) !important;
  color: var(--bf-text) !important;
  padding: 11px 14px !important;
  font-family: inherit !important;
  font-size: 0.9rem !important;
  outline: none !important;
  transition: var(--bf-transition) !important;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--bf-green) !important;
  background: var(--bf-surface) !important;
}