/* ==========================================================================
   BMS Live — Design Tokens
   Single source of truth for color, type, spacing, radius, shadow, motion.
   Palette: #1A312C forest · #428475 teal · #89D7B7 mint · #FFF4E1 cream
   ========================================================================== */

/* ---- Fonts (vendored, variable) ---------------------------------------- */
@font-face {
  font-family: "Jakarta";
  src: url("/vendor/fonts/plus-jakarta-sans-variable.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: "InterVar";
  src: url("/vendor/fonts/inter-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
}

:root {
  /* ---- Brand palette ---------------------------------------------------- */
  --forest:  #1A312C;
  --teal:    #428475;
  --mint:    #89D7B7;
  --cream:   #FFF4E1;

  /* Brand scale (teal-centered) */
  --brand-50:  #eef7f3;
  --brand-100: #d6ede4;
  --brand-200: #aaddc9;
  --brand-300: #89D7B7;
  --brand-400: #5cae95;
  --brand-500: #428475;
  --brand-600: #34695d;
  --brand-700: #295147;
  --brand-800: #1f3d36;
  --brand-900: #1A312C;
  --brand-950: #112019;

  /* ---- Semantic colors -------------------------------------------------- */
  --color-primary:        var(--brand-500);
  --color-primary-hover:  var(--brand-600);
  --color-primary-soft:   var(--brand-100);
  --color-accent:         var(--brand-300);
  --color-ink:            var(--brand-900);   /* deep forest text on light */

  --success: #2e9e6b;  --success-soft: #e2f6ec;
  --warning: #c98a14;  --warning-soft: #fbf1da;
  --danger:  #d2453a;  --danger-soft:  #fbe6e4;
  --info:    #2f7ab0;  --info-soft:    #e4f1fa;

  /* ---- Neutrals / surfaces --------------------------------------------- */
  --bg:           #f6f8f7;   /* app background (cool off-white) */
  --bg-warm:      var(--cream);
  --surface:      #ffffff;
  --surface-2:    #f1f4f3;
  --surface-sunk: #eceff0;
  --border:       #e2e8e5;
  --border-strong:#cfd8d4;

  --text:         #16241f;
  --text-soft:    #4a5a54;
  --text-muted:   #7d8c86;
  --text-invert:  #f3f8f5;
  --text-on-brand:#ffffff;

  /* Dark admin sidebar surface */
  --side-bg:      var(--brand-900);
  --side-bg-2:    #14271f;
  --side-text:    #cfe3da;
  --side-muted:   #84a596;
  --side-active:  var(--brand-300);

  /* ---- Typography ------------------------------------------------------- */
  --font-sans: "InterVar", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Jakarta", "InterVar", system-ui, sans-serif;

  /* Fluid type scale — adapts 360px → 1440px */
  --fs-xs:   clamp(0.72rem, 0.69rem + 0.15vw, 0.78rem);
  --fs-sm:   clamp(0.82rem, 0.79rem + 0.18vw, 0.9rem);
  --fs-base: clamp(0.92rem, 0.88rem + 0.22vw, 1rem);
  --fs-md:   clamp(1.02rem, 0.96rem + 0.3vw, 1.15rem);
  --fs-lg:   clamp(1.18rem, 1.08rem + 0.5vw, 1.4rem);
  --fs-xl:   clamp(1.4rem, 1.22rem + 0.9vw, 1.85rem);
  --fs-2xl:  clamp(1.7rem, 1.4rem + 1.5vw, 2.5rem);
  --fs-3xl:  clamp(2.1rem, 1.6rem + 2.6vw, 3.4rem);

  --lh-tight: 1.15;
  --lh-snug:  1.32;
  --lh-base:  1.55;

  --fw-light: 300;
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extra: 800;

  /* ---- Spacing scale (4px base) ---------------------------------------- */
  --sp-1: 0.25rem; --sp-2: 0.5rem;  --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.25rem; --sp-6: 1.5rem;  --sp-8: 2rem;    --sp-10: 2.5rem;
  --sp-12: 3rem;   --sp-16: 4rem;   --sp-20: 5rem;   --sp-24: 6rem;

  /* ---- Radius ----------------------------------------------------------- */
  --r-xs: 6px; --r-sm: 9px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px;
  --r-pill: 999px; --r-circle: 50%;

  /* ---- Shadows (soft, layered, brand-tinted) --------------------------- */
  --sh-xs: 0 1px 2px rgba(26,49,44,.06);
  --sh-sm: 0 2px 8px rgba(26,49,44,.07), 0 1px 2px rgba(26,49,44,.05);
  --sh-md: 0 8px 24px rgba(26,49,44,.09), 0 2px 6px rgba(26,49,44,.05);
  --sh-lg: 0 18px 48px rgba(26,49,44,.14), 0 6px 14px rgba(26,49,44,.06);
  --sh-xl: 0 30px 70px rgba(26,49,44,.20);
  --sh-brand: 0 10px 28px rgba(66,132,117,.35);
  --ring: 0 0 0 3px rgba(66,132,117,.28);

  /* ---- Motion ----------------------------------------------------------- */
  --ease: cubic-bezier(.4,0,.2,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --t-fast: .14s; --t: .24s; --t-slow: .4s;

  /* ---- Layout ----------------------------------------------------------- */
  --container: 1240px;
  --sidebar-w: 264px;
  --sidebar-w-collapsed: 76px;
  --topbar-h: 66px;
  --bottomnav-h: 64px;
  --header-h: 68px;

  /* ---- Z-index ---------------------------------------------------------- */
  --z-base: 1; --z-sticky: 100; --z-drawer: 900; --z-overlay: 950;
  --z-modal: 1000; --z-sheet: 1050; --z-toast: 1100; --z-loader: 1200;
}