/* ================================================================
   InterFlocks — Design Tokens (single source of truth)
   Load order: bootstrap.min.css → theme.css → site.css / public.css
   ================================================================ */
:root{
  /* Brand palette */
  --brand-orange:#FF7F11;
  --brand-orange-dark:#e8710a;
  --brand-orange-soft:#fff2e5;
  --brand-sage:#ACBFA4;
  --brand-cream:#E2E8CE;
  --brand-ink:#262626;

  /* Surface & neutrals */
  --surface:#ffffff;
  --surface-alt:#f7f8f4;
  --surface-muted:#f1f2ed;
  --surface-sunken:#eceee7;
  --border:#eceee7;
  --border-strong:#d9dcd3;
  --text:#262626;
  --text-muted:#5b5b5b;
  --text-subtle:#8a8a8a;
  --text-faint:#a6a6a6;

  /* Sidebar (light) tokens */
  --sidebar-bg:#FCFCFA;
  --sidebar-bg-hover:#F3F4EE;
  --sidebar-border:#EDEEE8;
  --sidebar-text:#4A4A4A;
  --sidebar-text-muted:#8A8A8A;
  --sidebar-text-section:#6B6B6B;
  --sidebar-brand-text:#262626;

  /* Sidebar collapsed width */
  --sidebar-w-collapsed:72px;

  /* Topbar icon button */
  --icon-btn-hover:#F3F4EE;
  --badge-dot:#dc3545;

  /* Typography */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Plus Jakarta Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", monospace;

  /* Radii */
  --radius-xs:.35rem;
  --radius-sm:.5rem;
  --radius-md:.75rem;
  --radius-lg:1rem;
  --radius-xl:1.25rem;
  --radius-pill:999px;

  /* Shadows */
  --shadow-xs:0 1px 2px rgba(0,0,0,.04);
  --shadow-sm:0 1px 2px rgba(0,0,0,.05), 0 1px 1px rgba(0,0,0,.03);
  --shadow-md:0 4px 14px rgba(0,0,0,.06);
  --shadow-lg:0 12px 30px rgba(0,0,0,.08);
  --shadow-orange:0 6px 18px rgba(255,127,17,.35);

  /* Focus ring */
  --ring: 0 0 0 3px rgba(255,127,17,.22);
  --ring-danger: 0 0 0 3px rgba(220,53,69,.22);

  /* Layout */
  --sidebar-w:260px;

  /* Bootstrap 5 overrides */
  --bs-primary:#FF7F11;
  --bs-primary-rgb:255,127,17;
  --bs-link-color:#FF7F11;
  --bs-link-hover-color:#e8710a;
  --bs-body-font-family: var(--font-sans);
  --bs-body-color: var(--text);
  --bs-heading-color: var(--brand-ink);
  --bs-border-color: var(--border);
}

/* ---- Base typography ---- */
html{
  font-size:14px;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
@media (min-width:768px){ html{ font-size:15px; } }

body{
  font-family: var(--font-sans);
  font-feature-settings: "cv11", "ss01", "ss03";
  color: var(--text);
}

h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{
  font-family: var(--font-display);
  font-weight:700;
  letter-spacing:-.015em;
  color: var(--brand-ink);
}

/* Monospace for numeric / code contexts */
code, kbd, samp, pre, .font-mono{ font-family: var(--font-mono); }

/* ---- Unified focus ring ---- */
*:focus{ outline:none; }
*:focus-visible{
  outline:none;
  box-shadow: var(--ring);
  border-radius: var(--radius-sm);
}
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.form-check-input:focus-visible{
  box-shadow: var(--ring);
  border-color: var(--brand-orange);
}

/* ---- Material Symbols base ---- */
.material-symbols-outlined{
  font-family: "Material Symbols Outlined";
  font-weight: normal;
  font-style: normal;
  font-size: 1.25rem;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  user-select: none;
  vertical-align: middle;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.material-symbols-outlined.filled{ font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24; }
.material-symbols-outlined.bold{ font-variation-settings: 'FILL' 0, 'wght' 600, 'GRAD' 0, 'opsz' 24; }
.material-symbols-outlined.xs{ font-size: .95rem; }
.material-symbols-outlined.sm{ font-size: 1.05rem; }
.material-symbols-outlined.lg{ font-size: 1.5rem; }
.material-symbols-outlined.xl{ font-size: 2rem; }
.material-symbols-outlined.xxl{ font-size: 2.75rem; }