/*
  Souqly brand tokens.
  Values are not invented for this site — they are the same tokens already
  used across the real app (app/login, app/(tabs)/home, etc. each define
  `const NAVY = "#123B66"`) and in play-store-assets/source/brand.css, which
  states it pulls "directly from the app's real design system."
*/

:root {
  /* ---------- Brand ---------- */
  --navy: #123B66;
  --navy-deep: #0A2440;
  --navy-soft: #1B4C82;
  --navy-mid: #16487D;

  /* ---------- Neutrals ---------- */
  --ink: #0C1D2B;
  --muted: #6B7C8F;
  --muted-soft: #93A2B3;
  --bg: #F5F7FA;
  --bg-soft: #EEF2F5;
  --card: #FFFFFF;
  --border: #E3E8ED;
  --overlay: rgba(12, 29, 43, 0.4);

  /* ---------- Semantic ---------- */
  --red: #E53935;
  --green: #16A34A;
  --green-bg: #E7F6ED;
  --amber: #B45309;
  --amber-bg: #FEF3C7;

  /* ---------- On-navy text ---------- */
  --on-navy: #FFFFFF;
  --on-navy-muted: rgba(255, 255, 255, 0.78);
  --on-navy-faint: rgba(255, 255, 255, 0.55);
  --on-navy-border: rgba(255, 255, 255, 0.16);
  --on-navy-surface: rgba(255, 255, 255, 0.08);

  /* ---------- Type ---------- */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  --text-2xs: 0.75rem;   /* 12 */
  --text-xs: 0.8125rem;  /* 13 */
  --text-sm: 0.9375rem;  /* 15 */
  --text-base: 1.0625rem;/* 17 */
  --text-lg: 1.25rem;    /* 20 */
  --text-xl: 1.625rem;   /* 26 */
  --text-2xl: 2.125rem;  /* 34 */
  --text-3xl: 2.75rem;   /* 44 */
  --text-4xl: 3.5rem;    /* 56 */
  --text-5xl: 4.25rem;   /* 68 */

  /* ---------- Spacing (4px base) ---------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3rem;
  --space-9: 4rem;
  --space-10: 5rem;
  --space-11: 6.5rem;
  --space-12: 8rem;

  /* ---------- Radius ---------- */
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* ---------- Shadow ---------- */
  --shadow-sm: 0 1px 2px rgba(12, 29, 43, 0.06), 0 1px 1px rgba(12, 29, 43, 0.04);
  --shadow-md: 0 8px 24px rgba(12, 29, 43, 0.08);
  --shadow-lg: 0 24px 48px rgba(12, 29, 43, 0.12);
  --shadow-navy: 0 30px 60px rgba(6, 20, 38, 0.35);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 150ms;
  --dur-base: 240ms;
  --dur-slow: 420ms;

  /* ---------- Layout ---------- */
  --container: 1180px;
  --header-h: 76px;
}