/* =========================================
   WarBazE Design Tokens (source of truth)
   - Only CSS custom properties (variables)
   - Theme by changing body class:
     .wb-theme-light / .wb-theme-dark
========================================= */

/* ---- Global primitives (do not use directly in components unless needed) ---- */
:root{
  /* Brand */
  --wb-brand-gold-500: #B08D57;
  --wb-brand-gold-600: #c39b60;

  /* Neutral scale */
  --wb-neutral-0:   #ffffff;
  --wb-neutral-50:  #f6f7f9;
  --wb-neutral-100: #eef1f4;
  --wb-neutral-200: #d9dee5;
  --wb-neutral-300: #b9c0cb;
  --wb-neutral-400: #8893a3;
  --wb-neutral-500: #5f6b7a;
  --wb-neutral-600: #3f4854;
  --wb-neutral-700: #2b3138;
  --wb-neutral-800: #1d232a;
  --wb-neutral-900: #0f1216;
  --wb-neutral-950: #07090c;

  /* Alpha borders */
  --wb-alpha-white-08: rgba(255,255,255,.08);
  --wb-alpha-white-10: rgba(255,255,255,.10);
  --wb-alpha-white-18: rgba(255,255,255,.18);
  --wb-alpha-black-08: rgba(0,0,0,.08);
  --wb-alpha-black-10: rgba(0,0,0,.10);
  --wb-alpha-black-16: rgba(0,0,0,.16);

  /* Shadows */
  --wb-shadow-soft: 0 12px 28px rgba(0,0,0,.06);
  --wb-shadow-hero: 0 18px 45px rgba(0,0,0,.22);
  --wb-shadow-glass: 0 16px 40px rgba(0,0,0,.22);

  /* Radius */
  --wb-radius-sm: 12px;
  --wb-radius-md: 16px;
  --wb-radius-lg: 18px;
  --wb-radius-xl: 22px;
  --wb-radius-pill: 999px;

  /* Spacing (use as reference; Bootstrap spacing still ok) */
  --wb-space-2:  .5rem;
  --wb-space-3:  .75rem;
  --wb-space-4:  1rem;
  --wb-space-5:  1.25rem;
  --wb-space-6:  1.5rem;
  --wb-space-8:  2rem;

  /* Type */
  --wb-font-ui: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  --wb-weight-regular: 400;
  --wb-weight-semibold: 600;
  --wb-weight-bold: 700;
  --wb-weight-black: 900;

  /* Tracking */
  --wb-track-tight: .01em;
  --wb-track-wide:  .12em;
  --wb-track-wider: .14em;
  --wb-track-heading: -0.02em;

  /* Section heading (values used by .wb-heading in template.css) */
  --wb-heading-weight: var(--wb-weight-bold);
  --wb-heading-margin-bottom: 0.25rem;

  /* Motion */
  --wb-ease: cubic-bezier(.2,.8,.2,1);
  --wb-duration-fast: 120ms;
  --wb-duration: 180ms;
}

/* =========================================
   Semantic tokens (use THESE in components)
   Light theme default
========================================= */
:root,
body.wb-theme-light{
  --wb-color-bg: var(--wb-neutral-50);
  --wb-color-surface: var(--wb-neutral-0);
  --wb-color-surface-muted: rgba(0,0,0,.02);

  --wb-color-text: rgba(17,20,24,.92);
  --wb-color-text-muted: rgba(17,20,24,.55);
  --wb-color-text-subtle: rgba(17,20,24,.45);
  --wb-color-heading: rgba(17,20,24,.92);

  --wb-color-border: var(--wb-alpha-black-08);
  --wb-color-border-strong: rgba(0,0,0,.10);

  --wb-color-brand: var(--wb-brand-gold-500);
  --wb-color-brand-hover: var(--wb-brand-gold-600);

  --wb-color-btn-outline-border: rgba(0,0,0,.18);
  --wb-color-btn-outline-text: rgba(17,20,24,.85);

  --wb-shadow-card: var(--wb-shadow-soft);
  --wb-shadow-stage: var(--wb-shadow-hero);
	
--wb-hero-grad-start: #2b3138;
  --wb-hero-grad-end:   #1d232a;
}

/* =========================================
   Dark theme (apply by adding class on body)
========================================= */
body.wb-theme-dark{
  --wb-color-bg: var(--wb-neutral-900);
  --wb-color-surface: var(--wb-neutral-800);
  --wb-color-surface-muted: rgba(255,255,255,.04);

  --wb-color-text: rgba(233,236,239,.95);
  --wb-color-text-muted: rgba(233,236,239,.72);
  --wb-color-text-subtle: rgba(233,236,239,.62);
  --wb-color-heading: rgba(233,236,239,.95);

  --wb-color-border: var(--wb-alpha-white-10);
  --wb-color-border-strong: rgba(255,255,255,.14);

  --wb-color-brand: var(--wb-brand-gold-500);
  --wb-color-brand-hover: var(--wb-brand-gold-600);

  /* Hyperlinks: high-contrast on dark; visited stays clearly readable */
  --wb-color-link: #e8c547;
  --wb-color-link-visited: #b8c4ce;

  /* Empty state / placeholder text (e.g. "No service units recorded") — readable, not blue */
  --wb-color-empty-state: rgba(233,236,239,.88);

  --wb-color-btn-outline-border: rgba(255,255,255,.22);
  --wb-color-btn-outline-text: rgba(233,236,239,.92);

  --wb-shadow-card: 0 12px 30px rgba(0,0,0,.35);
  --wb-shadow-stage: 0 18px 45px rgba(0,0,0,.35);
	  --wb-hero-grad-start: #1a2026;
  --wb-hero-grad-end:   #2b3138;
}

/* =========================================
   Component Tokens: Navbar
   Use in components via --wb-nav-*
========================================= */

/* Default (Light) */
:root,
body.wb-theme-light{
  --wb-nav-bg: rgba(255,255,255,.92);
  --wb-nav-backdrop: blur(10px);
  --wb-nav-border: var(--wb-color-border);

  --wb-nav-text: rgba(17,20,24,.80);
  --wb-nav-text-hover: rgba(17,20,24,.95);
  --wb-nav-text-active: rgba(17,20,24,.95);

  --wb-nav-link-bg-hover: rgba(0,0,0,.03);
  --wb-nav-link-bg-active: rgba(0,0,0,.05);

  --wb-nav-radius: 12px;
  --wb-nav-height-pad-y: .85rem;
}

/* Dark theme override */
body.wb-theme-dark{
  --wb-nav-bg: rgba(15,18,22,.72);
  --wb-nav-backdrop: blur(12px);
  --wb-nav-border: var(--wb-color-border);

  --wb-nav-text: rgba(233,236,239,.78);
  --wb-nav-text-hover: rgba(233,236,239,.95);
  --wb-nav-text-active: rgba(233,236,239,.95);

  --wb-nav-link-bg-hover: rgba(255,255,255,.06);
  --wb-nav-link-bg-active: rgba(255,255,255,.10);

  --wb-nav-radius: 12px;
  --wb-nav-height-pad-y: .85rem;
}
/* =========================
   Hero tokens (fix wash-out)
========================= */
:root,
body.wb-theme-light{
  --wb-hero-grad-start: #2b3138;
  --wb-hero-grad-end:   #1d232a;

  --wb-hero-text: rgba(233,236,239,.95);
  --wb-hero-muted: rgba(233,236,239,.70);

  --wb-hero-panel-bg: rgba(17,20,24,.45);
  --wb-hero-card-bg:  rgba(0,0,0,.22);
  --wb-hero-border:   rgba(255,255,255,.12);
}

body.wb-theme-dark{
  --wb-hero-grad-start: #1b2127;
  --wb-hero-grad-end:   #2f3741;

  --wb-hero-text: rgba(233,236,239,.95);
  --wb-hero-muted: rgba(233,236,239,.70);

  --wb-hero-panel-bg: rgba(17,20,24,.55);
  --wb-hero-card-bg:  rgba(0,0,0,.28);
  --wb-hero-border:   rgba(255,255,255,.14);
}