/* ==========================================================================
   WEMADE — Design tokens
   Palette + logo sourced directly from the brand assets:
     - wemadecolorpalete.jpeg  (4 official colors)
     - no background.pdf      (full lockup incl. "Social Media & Advertising
                                Ageny" subline)
   Do not add colors outside this set without checking with Kh first.
   ========================================================================== */

:root {
  /* ---- Official brand colors ---- */
  --navy: #00274a;      /* primary — text, dark backgrounds, logo */
  --steel: #7295bd;     /* secondary — lighter blue */
  --teal: #5a94b0;      /* secondary — hover / mid accents */
  --offwhite: #f2f2f2;  /* primary light background */
  --white: #ffffff;

  /* Tints/shades derived from the 4 colors above, for hover/border states only */
  --navy-800: #05386b;
  --navy-700: #0c477f;
  --navy-050: rgba(0, 39, 74, 0.05);
  --navy-100: rgba(0, 39, 74, 0.1);
  --navy-150: rgba(0, 39, 74, 0.15);
  --navy-200: rgba(0, 39, 74, 0.2);
  --navy-450: rgba(0, 39, 74, 0.45);
  --navy-600a: rgba(0, 39, 74, 0.6);

  --offwhite-60: rgba(242, 242, 242, 0.6);
  --offwhite-45: rgba(242, 242, 242, 0.45);
  --offwhite-25: rgba(242, 242, 242, 0.25);
  --offwhite-10: rgba(242, 242, 242, 0.1);

  /* Semantic aliases */
  --ink: var(--navy);
  --paper: var(--offwhite);

  /* ---- Type ---- */
  --font-display: "Poppins", "Segoe UI", Arial, sans-serif;
  --font-body: "Poppins", "Segoe UI", Arial, sans-serif;

  /* ---- Motion ---- */
  --ease-expo-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-quart-out: cubic-bezier(0.25, 1, 0.5, 1);

  /* ---- Layout ---- */
  --container-max: 1680px;
  --gutter: 20px;
  --nav-h: 52px; /* height of each floating pill (Kh's segmented-pills layout) */
  --nav-float-gap: 14px; /* margin around the floating navbar pills */

  color-scheme: light;
}

@media (min-width: 768px) {
  :root {
    --gutter: 32px;
    --nav-h: 60px;
    --nav-float-gap: 22px;
  }
}