/* ==========================================================================
   FindMotos — Design System Tokens
   The single source of truth for color, spacing, type, and radius.
   ========================================================================== */

:root {
  /* ---- Brand & Surface ------------------------------------------------ */
  --color-primary:        #2F539B;   /* FindMotos brand navy             */
  --color-primary-hover:  #25427C;   /* Pressed / hover state            */
  --color-primary-soft:   #EAEEF6;   /* Tinted backgrounds, chips        */

  --color-bg:             #FFFFFF;   /* App background                   */
  --color-surface:        #FFFFFF;   /* Cards, sheets                    */

  /* ---- Two neutral support colors (max, per brief) -------------------- */
  --color-gray-soft:      #F5F6F8;   /* Section backgrounds, inputs      */
  --color-gray-light:     #E4E7EB;   /* Borders, dividers                */

  /* ---- Text ----------------------------------------------------------- */
  --color-text:           #1A2330;   /* Primary text                     */
  --color-text-muted:     #6A7280;   /* Secondary text, meta             */
  --color-text-faint:     #9AA1AC;   /* Placeholder, captions            */
  --color-text-on-primary:#FFFFFF;

  /* ---- Functional (used sparingly) ------------------------------------ */
  --color-success:        #1E7F4F;
  --color-whatsapp:       #25D366;
  --color-favorite:       #E0245E;
  --color-focus-ring:     rgba(47, 83, 155, 0.3);

  /* ---- Typography ----------------------------------------------------- */
  --font-base: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --fs-xs:   0.75rem;   /* 12px */
  --fs-sm:   0.875rem;  /* 14px */
  --fs-base: 1rem;      /* 16px */
  --fs-md:   1.125rem;  /* 18px */
  --fs-lg:   1.375rem;  /* 22px */
  --fs-xl:   1.75rem;   /* 28px */
  --fs-2xl:  2.25rem;   /* 36px */
  --fs-3xl:  3rem;      /* 48px */

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-bold:    700;

  --lh-tight: 1.2;
  --lh-base:  1.55;

  /* ---- Spacing scale (4px base) --------------------------------------- */
  --space-1:  0.25rem;  /*  4px */
  --space-2:  0.5rem;   /*  8px */
  --space-3:  0.75rem;  /* 12px */
  --space-4:  1rem;     /* 16px */
  --space-5:  1.5rem;   /* 24px */
  --space-6:  2rem;     /* 32px */
  --space-7:  3rem;     /* 48px */
  --space-8:  4rem;     /* 64px */
  --space-9:  6rem;     /* 96px */

  /* ---- Radius (max 5px per brief) ------------------------------------- */
  --radius-sm: 3px;
  --radius:    5px;
  --radius-pill: 999px;   /* pills/avatars only — visual, not box corners */

  /* ---- Elevation (subtle, no heavy shadows) --------------------------- */
  --shadow-sm:  0 1px 2px rgba(26, 35, 48, 0.06);
  --shadow:     0 2px 8px rgba(26, 35, 48, 0.08);
  --shadow-lg:  0 6px 24px rgba(26, 35, 48, 0.10);

  /* ---- Layout --------------------------------------------------------- */
  --container-max: 1200px;
  --header-h: 64px;
  --transition: 160ms ease;

  /* ---- Z-index scale -------------------------------------------------- */
  --z-header:   100;
  --z-overlay:  200;
  --z-sheet:    300;
  --z-toast:    400;
}

@media (max-width: 768px) {
  :root {
    --fs-2xl: 1.875rem;  /* 30px */
    --fs-3xl: 2.125rem;  /* 34px */
    --header-h: 72px;
  }
}