/* ==========================================================================
   Jeeman Booking — Design Tokens
   Single source of truth for color, type, spacing, radius, shadow, motion.
   Palette: #ff5200 orange · #203955 navy · #ffeae0 peach · #fffdfa 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 ---------------------------------------------------- */
  /* These four names are inherited from the BMS build and are still referenced
     directly in ~16 places in app.css. Rather than rewrite every call site, they
     are remapped to the Jeeman equivalents, preserving each one's ROLE:
       forest = deepest surface, teal = mid brand, mint = light accent on dark. */
  --forest:  #203955;   /* jeeman navy  */
  --teal:    #ff5200;   /* jeeman orange */
  --mint:    #ffc1a6;   /* light peach — legible on navy/photo overlays */
  --cream:   #fffdfa;

  /* Brand scale — Jeeman orange (#ff5200), taken from jeeman.online's own
     stylesheet so the admin and storefront match the live site and the app.
     The 800-950 steps are the jeeman navy (#203955), which is what the live
     site uses for deep surfaces rather than a dark orange. */
  --brand-50:  #fff5f2;
  --brand-100: #fff1ed;
  --brand-200: #ffe0d2;
  --brand-300: #ffc1a6;
  --brand-400: #ff8a52;
  --brand-500: #ff5200;
  --brand-600: #d75112;
  --brand-700: #c7480a;
  --brand-800: #2c4d70;
  --brand-900: #203955;
  --brand-950: #16283c;

  /* ---- 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:           #fdf8f6;   /* app background (warm off-white, matches jeeman.online) */
  --bg-warm:      var(--cream);
  --surface:      #ffffff;
  --surface-2:    #f6f1ee;
  --surface-sunk: #f1eae6;
  --border:       #ece3de;
  --border-strong:#dbcec7;

  --text:         #202020;
  --text-soft:    #4a4a4a;
  --text-muted:   #857e7a;
  --text-invert:  #fdf8f6;
  --text-on-brand:#ffffff;

  /* Dark admin sidebar surface — jeeman navy, with the orange as the active hue */
  --side-bg:      var(--brand-900);
  --side-bg-2:    #16283c;
  --side-text:    #d5dfeb;
  --side-muted:   #8ba2bd;
  --side-active:  #ff8a52;

  /* ---- 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(255,82,0,.30);
  --ring: 0 0 0 3px rgba(255,82,0,.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;
}