/* Locate2u Design System — Colors + Type */
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  /* ----- BRAND PRIMARIES (the only three) ------------------
     Per brand spec — every blue/navy in the system is one of these. */
  --l2u-primary: #2B93FF;                 /* Primary Brand Color               */
  --l2u-bluish-grey: #1C3E61;             /* Bluish Grey — mid dark surfaces   */
  --l2u-dark-blue: #01101F;               /* Dark Blue — hero / deepest bg     */

  /* Legacy aliases — map all previous tokens to the 3 primaries
     so existing components keep rendering correctly. */
  --l2u-blue: var(--l2u-primary);
  --l2u-blue-deep: var(--l2u-primary);
  --l2u-blue-sky: var(--l2u-primary);
  --l2u-blue-tint: rgba(43, 147, 255, 0.10);
  --l2u-navy: var(--l2u-bluish-grey);
  --l2u-navy-deep: var(--l2u-dark-blue);
  --l2u-navy-darkest: var(--l2u-dark-blue);
  --l2u-navy-mid: var(--l2u-bluish-grey);
  --l2u-navy-soft: var(--l2u-bluish-grey);
  --l2u-navy-darker: var(--l2u-bluish-grey);

  /* ----- NEUTRALS (light) ---------------------------------- */
  --l2u-cream: rgb(251, 250, 247);        /* page background — warm off-white  */
  --l2u-cream-2: rgb(242, 241, 236);      /* slightly deeper cream             */
  --l2u-white: #ffffff;
  --l2u-border: rgb(226, 228, 234);       /* hairline border on light          */
  --l2u-text-mute: rgb(200, 210, 226);    /* muted text on dark                */
  --l2u-text-mute-2: rgb(103, 120, 154);  /* mid-grey text                     */
  --l2u-text-body: rgb(68, 88, 122);      /* body copy on light                */

  /* ----- SEMANTIC ----------------------------------------- */
  --l2u-success: rgb(45, 210, 122);       /* "live" / on-time / positive delta */
  --l2u-warn: rgb(244, 161, 29);          /* alerts / geofence                 */
  --l2u-danger: #FE5425;                  /* errors / failed delivery / urgent */

  /* ----- ALPHAS (on dark) --------------------------------- */
  --l2u-dark-fill-soft: rgba(255, 255, 255, 0.04);
  --l2u-dark-fill: rgba(255, 255, 255, 0.06);
  --l2u-dark-fill-strong: rgba(255, 255, 255, 0.10);
  --l2u-dark-fill-stronger: rgba(255, 255, 255, 0.12);
  --l2u-dark-border: rgba(255, 255, 255, 0.08);
  --l2u-dark-border-strong: rgba(255, 255, 255, 0.10);
  --l2u-on-dark-9: rgba(255, 255, 255, 0.9);
  --l2u-on-dark-78: rgba(255, 255, 255, 0.78);
  --l2u-on-dark-7: rgba(255, 255, 255, 0.7);
  --l2u-on-dark-5: rgba(255, 255, 255, 0.5);
  --l2u-on-dark-45: rgba(255, 255, 255, 0.45);
  --l2u-on-dark-4: rgba(255, 255, 255, 0.4);

  /* ----- SHADOWS / ELEVATION ------------------------------ */
  --l2u-shadow-card: 0 1px 2px rgba(15, 31, 56, 0.04), 0 8px 24px rgba(15, 31, 56, 0.06);
  --l2u-shadow-pop:  0 6px 18px rgba(0, 0, 0, 0.20);
  --l2u-shadow-toast: 0 8px 24px rgba(0, 0, 0, 0.25);
  --l2u-shadow-cta-blue: 0 8px 28px rgba(10, 115, 209, 0.4);

  /* ----- RADIUS ------------------------------------------- */
  --l2u-r-pill: 999px;
  --l2u-r-xs: 8px;
  --l2u-r-sm: 10px;
  --l2u-r-md: 12px;
  --l2u-r-lg: 14px;
  --l2u-r-xl: 16px;
  --l2u-r-2xl: 22px;
  --l2u-r-3xl: 24px;
  --l2u-r-4xl: 28px;

  /* ----- SPACING (8 / 12 base) ---------------------------- */
  --l2u-s-1: 4px;
  --l2u-s-2: 8px;
  --l2u-s-3: 12px;
  --l2u-s-4: 16px;
  --l2u-s-5: 20px;
  --l2u-s-6: 24px;
  --l2u-s-7: 28px;
  --l2u-s-8: 32px;
  --l2u-s-12: 48px;
  --l2u-s-14: 56px;
  --l2u-s-16: 64px;
  --l2u-s-20: 80px;
  --l2u-s-24: 96px;

  /* ----- TYPE FAMILIES ------------------------------------ */
  --l2u-font-sans: "Roboto", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --l2u-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* ----- SEMANTIC TEXT ------------------------------------ */
  --fg-strong: var(--l2u-navy);
  --fg-body: var(--l2u-text-body);
  --fg-mute: var(--l2u-text-mute-2);
  --fg-on-dark: #ffffff;
  --fg-on-dark-mute: var(--l2u-text-mute);
  --link: var(--l2u-blue-deep);
  --bg-page: var(--l2u-cream);
  --bg-surface: #ffffff;
  --bg-dark: var(--l2u-navy);
  --bg-dark-deep: var(--l2u-navy-deep);
}

/* =============================================================
   Semantic type styles
   ============================================================= */

.l2u-eyebrow {
  font-family: var(--l2u-font-mono);
  font-weight: 500;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 1.6px;
  color: var(--l2u-blue-deep);
  text-transform: uppercase;
}

.l2u-eyebrow-mute {
  font-family: var(--l2u-font-mono);
  font-weight: 500;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 1.6px;
  color: var(--l2u-text-mute-2);
  text-transform: uppercase;
}

.l2u-h1 {
  font-family: var(--l2u-font-sans);
  font-weight: 400;
  font-size: 80px;
  line-height: 84px;
  letter-spacing: -2.4px;
  color: var(--l2u-navy);
}

.l2u-h2 {
  font-family: var(--l2u-font-sans);
  font-weight: 400;
  font-size: 56px;
  line-height: 64px;
  letter-spacing: -1.6px;
  color: var(--l2u-navy);
}

.l2u-h3 {
  font-family: var(--l2u-font-sans);
  font-weight: 400;
  font-size: 48px;
  line-height: 56px;
  letter-spacing: -1.2px;
  color: var(--l2u-navy);
}

.l2u-h4 {
  font-family: var(--l2u-font-sans);
  font-weight: 700;
  font-size: 28px;
  line-height: 38px;
  letter-spacing: -0.6px;
  color: var(--l2u-navy);
}

.l2u-h5 {
  font-family: var(--l2u-font-sans);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.2;
  color: var(--l2u-navy);
}

.l2u-lead {
  font-family: var(--l2u-font-sans);
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
  color: var(--l2u-text-body);
}

.l2u-body {
  font-family: var(--l2u-font-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 26px;
  color: var(--l2u-text-body);
}

.l2u-small {
  font-family: var(--l2u-font-sans);
  font-weight: 400;
  font-size: 14px;
  line-height: 22px;
  color: var(--l2u-text-body);
}

.l2u-caption {
  font-family: var(--l2u-font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.3px;
  color: var(--l2u-text-mute-2);
}

.l2u-mono {
  font-family: var(--l2u-font-mono);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.2;
  color: var(--l2u-navy);
}

.l2u-mono-eyebrow {
  font-family: var(--l2u-font-mono);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--l2u-blue-deep);
}

.l2u-wordmark {
  font-family: var(--l2u-font-sans);
  font-weight: 500;
  letter-spacing: -0.4px;
  color: inherit;
}

/* =============================================================
   Surface helpers
   ============================================================= */

.l2u-surface-page    { background: var(--l2u-cream); color: var(--l2u-navy); }
.l2u-surface-dark    { background: var(--l2u-navy); color: #fff; }
.l2u-surface-darkest { background: var(--l2u-navy-darkest); color: #fff; }
.l2u-surface-card    { background: #fff; border: 1px solid var(--l2u-border); border-radius: var(--l2u-r-2xl); }
.l2u-surface-map     { background: var(--l2u-navy-mid); border-radius: var(--l2u-r-xl); }