/*
  Leading Commerce design decisions. These bind every page task.

  Drawn from a study of restrained, typographic systems on styles.refero.design
  (Ramp, Notion, Vercel, Intercom, Superr) and translated to this brand's palette.

   1. One action colour. Blue (#2563EB) fills the single primary button on a view,
      and marks links on hover and the focus ring. Nothing decorative is blue.
      Lime appears only as a small mark (the eyebrow tick); indigo only inside
      the logo and, rarely, as a quiet tint. Hierarchy comes from navy ink and
      the cool gray, not from more colours.
   2. Left-aligned, always. Headlines, intros and section headers sit on the left
      edge of a centred 1200px container. No centred hero stacks, no centred body
      copy. Vary section layouts (split header + content, 2-column, list, grid)
      rather than repeating one centred block.
   3. Type does the work. Poppins 600 for headings with tight leading (1.08–1.2)
      and negative tracking that grows with size; Inter 400 at 16px/1.6 for body,
      18–20px for a lead paragraph. Text measure is capped at 68ch.
   4. Small uppercase labels. Eyebrows and footer headings are Inter 600, 12px,
      uppercase, +0.08em tracking, in cool gray. This is the only uppercase on
      the site.
   5. Spacing on a 4px base with a short scale (4, 8, 12, 16, 24, 32, 48, 64, 96,
      128). Sections breathe: 64px vertical padding on mobile rising to 112px.
      Inside a section, 48–64px between header and content, 24–32px between cards.
   6. Borders, not shadows. Surfaces are separated by a 1px #E5E7EB hairline or by
      the shift from white to #F8FAFC. Cards have no shadow at rest or on hover;
      hover darkens the border. The one shadow token is reserved for layers that
      float above the page (search panel, dialogs).
   7. Two radii: 12px for controls (buttons, inputs, icon buttons) and 16px for
      cards and media. Small labels use 6px. No pills, no circles.
   8. Buttons are 48px tall (40px in the header), Inter 600, sentence case, no
      icons by default. Primary = blue fill (navy on hover). Secondary = white with a navy 1px
      border. Ghost = text with an underline that appears on hover. One primary
      per view.
   9. Links in running text are navy with a 1px underline, turning blue on hover.
      Navigation links carry no underline; the current page is marked by a 2px
      navy rule and never by colour alone.
  10. Cards are quiet and dense with information: 24px padding (32px from 900px),
      hairline border, heading + one or two lines + a text link. Badges are plain
      bordered labels, used once per card at most.
  11. Section transitions are a hairline rule or a white / #F8FAFC alternation.
      No gradients, waves, blobs or angled dividers. The footer is the only navy
      surface and closes the page.
  12. Motion is functional: 150ms colour and border transitions only. Nothing
      moves on scroll. All of it is disabled under prefers-reduced-motion.
*/

/* Inter */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/inter-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/inter-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/inter-latin-ext-500-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/inter-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/inter-latin-ext-600-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/inter-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* Poppins */
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/poppins-latin-ext-600-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/poppins-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/poppins-latin-ext-700-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/poppins-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  /* Palette */
  --color-blue: #2563EB;
  --color-indigo: #4F46E5;
  --color-lime: #84CC16;
  --color-gray: #64748B;
  --color-gray-light: #E5E7EB;
  --color-navy: #0B1F46;
  --color-white: #FFFFFF;
  --color-bg: #F8FAFC;

  /* Roles */
  --color-text: var(--color-navy);
  --color-text-muted: var(--color-gray);
  --color-surface: var(--color-white);
  --color-surface-alt: var(--color-bg);
  --color-border: var(--color-gray-light);
  --color-border-strong: var(--color-navy);
  --color-action: var(--color-blue);
  --color-action-hover: var(--color-navy);
  --color-on-navy: var(--color-white);
  --color-on-navy-muted: rgb(255 255 255 / 0.72);
  --color-border-on-navy: rgb(255 255 255 / 0.16);

  /* Type */
  --font-heading: "Poppins", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-md: 1.125rem;
  --text-lg: 1.25rem;
  --text-h4: 1.125rem;
  --text-h3: clamp(1.25rem, 1.16rem + 0.4vw, 1.5rem);
  --text-h2: clamp(1.75rem, 1.47rem + 1.2vw, 2.5rem);
  --text-h1: clamp(2.25rem, 1.71rem + 2.3vw, 3.5rem);

  --leading-tight: 1.08;
  --leading-heading: 1.2;
  --leading-body: 1.6;
  --tracking-h1: -0.03em;
  --tracking-h2: -0.022em;
  --tracking-h3: -0.012em;
  --tracking-label: 0.08em;
  --measure: 68ch;

  /* Space (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: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;
  --section-y: clamp(4rem, 2.6rem + 6vw, 7rem);
  --gutter: clamp(1.25rem, 0.6rem + 2.8vw, 2rem);

  /* Shape */
  --radius-xs: 6px;
  --radius: 12px;
  --radius-lg: 16px;
  --border: 1px solid var(--color-border);
  --shadow: 0 12px 32px -12px rgb(11 31 70 / 0.18); /* floating layers only */

  /* Layout */
  --container: 1200px;
  --header-h: 64px;

  /* Focus */
  --focus-ring: 2px solid var(--color-blue);
  --focus-offset: 2px;

  --transition: 150ms ease;
}

@media (min-width: 1200px) {
  :root { --header-h: 76px; }
}