/* ==========================================================================
   Mobisat — Design Tokens
   Palette sampled directly from the supplied logo (assets/images/brand/mobisat-logo.png):
     brand blue  #0D4C9E   brand red #EA1E24   tagline gray #949599
   All text/background pairings are checked for WCAG 2.2 AA contrast.
   ========================================================================== */

:root {
  /* ---- Brand ---- */
  --brand-blue: #0d4c9e;
  --brand-blue-600: #0a428b;
  --brand-blue-deep: #073a7d;
  --brand-blue-ink: #05264f;
  --brand-red: #ea1e24;
  --brand-red-deep: #c2151b;
  --brand-gray: #949599;

  /* ---- Ink / neutrals ---- */
  --ink-navy: #0a2540;
  --ink: #16222f;
  --ink-soft: #33414f;
  --muted: #5c6b7a;
  --muted-light: #8494a3;

  /* ---- Surfaces ---- */
  --surface: #ffffff;
  --surface-soft: #f5f8fb;
  --surface-blue: #eaf2fa;
  --surface-navy: #0a2540;
  --surface-navy-2: #0d2c4c;
  --line: #dbe4ee;
  --line-strong: #c3d0de;

  /* ---- State ---- */
  --success: #12784f;
  --warning: #8a5a00;
  --error: #b21f26;
  --info: var(--brand-blue);

  /* ---- Strict readability theme tokens ---- */
  --navy-950: #071f35;
  --navy-900: #0b2942;
  --navy-800: #10395b;

  --text-on-dark: #f7fbff;
  --muted-on-dark: #c8d7e6;
  --subtle-on-dark: #a6bccf;

  --text-on-light: #10243b;
  --muted-on-light: #5d6e80;
  --subtle-on-light: #718196;

  --surface-white: #ffffff;
  --whatsapp-green: #1fad59;

  /* ---- Layer surfaces on navy (aliased to the tokens above) ---- */
  --on-navy: var(--text-on-dark);
  --on-navy-muted: var(--muted-on-dark);

  /* ---- Typography ---- */
  --font-display: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --fs-300: clamp(0.78rem, 0.76rem + 0.1vw, 0.84rem);
  --fs-400: clamp(0.92rem, 0.88rem + 0.2vw, 1rem);
  --fs-500: clamp(1.05rem, 1rem + 0.3vw, 1.18rem);
  --fs-600: clamp(1.24rem, 1.14rem + 0.5vw, 1.5rem);
  --fs-700: clamp(1.5rem, 1.32rem + 0.9vw, 2rem);
  --fs-800: clamp(1.95rem, 1.6rem + 1.7vw, 2.9rem);
  --fs-900: clamp(2.4rem, 1.9rem + 2.6vw, 3.85rem);

  --lh-tight: 1.12;
  --lh-snug: 1.28;
  --lh-body: 1.62;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extra: 800;

  /* ---- Spacing (8pt rhythm) ---- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-10: 8rem;

  /* ---- Radii ---- */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* ---- Elevation ---- */
  --shadow-xs: 0 1px 2px rgba(10, 37, 64, 0.06);
  --shadow-sm: 0 2px 8px rgba(10, 37, 64, 0.07);
  --shadow-md: 0 10px 28px rgba(10, 37, 64, 0.1);
  --shadow-lg: 0 24px 60px rgba(10, 37, 64, 0.16);
  --ring: 0 0 0 3px rgba(13, 76, 158, 0.4);

  /* ---- Layout ---- */
  --container: 1200px;
  --container-wide: 1360px;
  --container-reading: 720px;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --header-h: 76px;

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-1: 150ms;
  --dur-2: 260ms;
  --dur-3: 420ms;

  --z-header: 100;
  --z-mega: 110;
  --z-drawer: 200;
  --z-modal: 300;
  --z-toast: 400;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-1: 0ms; --dur-2: 0ms; --dur-3: 0ms; }
}