/* ===========================================================================
   Account Motion — design tokens
   Derived from the Meeko visual design system audit (31 Aug 2026).
   Colour, type, spacing, radius and motion values are unchanged from the
   audit. The stage colour mapping at the bottom is the Account Motion layer.
   ========================================================================= */

:root {
  /* --- Colour ------------------------------------------------------------ */
  --color-ink: #1d1d1d;
  --color-black: #000000;
  --color-white: #ffffff;
  --color-mist: #f7f7f7;
  --color-lavender: #e3e3ff;
  --color-sky: #e3f2ff;
  --color-blush: #fbebea;
  --color-pink: #ffe3fb;
  --color-butter: #ffe7a9;
  --color-mint: #dbf5f0;
  --color-lime: #e9fac0;
  --color-coral: #fc625d;
  --color-amber: #fcbb40;
  --color-green: #4cb155;
  --color-muted-ink: rgba(16, 16, 16, 0.55);
  --color-hairline: rgba(16, 16, 16, 0.12);

  /* --- Type -------------------------------------------------------------- */
  --font-display: "Uncut Sans Variable", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-hand: "Caveat", ui-rounded, cursive;

  /* Weight comes from the variable `wght` axis. The real axis in this file is
     300-700, but Framer declares the face as 400-1000 and asks headings for
     1000 - which the browser clamps to the axis max, 700. That clamp is why
     the source reports weight 1000 while the file tops out at Bold, and 700
     is what the reference actually renders. */
  --wght-display: 700;       /* major headings */
  --wght-heading-tight: 650; /* card titles, subheadings */
  --wght-label: 500;         /* uppercase metadata, buttons, nav */
  --wght-body: 375;          /* body copy */
  --wght-light: 350;         /* large lighter copy */

  --text-display-xl: 90px;
  --text-display-l: 68px;
  --text-hero-body: 24px;
  --text-page-title: 56px;
  --text-section-l: 50px;
  --text-section-m: 38px;
  --text-card-l: 30px;
  --text-card: 25px;
  --text-subheading: 22px;
  --text-body-l: 18px;
  --text-body: 17px;
  --text-body-s: 16px;
  --text-label: 15px;
  --text-micro: 12px;

  /* --- Space ------------------------------------------------------------- */
  --space-1: 5px;
  --space-2: 10px;
  --space-3: 15px;
  --space-4: 20px;
  --space-5: 25px;
  --space-6: 30px;
  --space-7: 40px;
  --space-8: 50px;
  --space-9: 60px;
  --space-10: 70px;
  --space-11: 90px;
  --space-12: 120px;

  /* --- Radius ------------------------------------------------------------ */
  --radius-control: 10px;
  --radius-card: 20px;
  --radius-card-large: 36px;
  --radius-capsule: 60px;
  --radius-round: 999px;

  /* --- Layout ------------------------------------------------------------ */
  --container: 1200px;
  --gutter: 80px;
  --header-h: 76px;

  /* --- Motion ------------------------------------------------------------ */
  --ease-meeko: cubic-bezier(0.44, 0, 0.56, 1);
  --duration-fast: 250ms;
  --duration-medium: 500ms;
  --duration-slow: 800ms;

  /* --- Stage colour system (Account Motion) ------------------------------
     Each stage of the framework owns one pastel family and keeps it across
     the approach cards, the work cards and the case study pages. */
  --stage-evaluate: var(--color-sky);
  --stage-engage: var(--color-blush);
  --stage-expand: var(--color-mint);
}

@font-face {
  font-family: "Uncut Sans Variable";
  src: url("../fonts/uncut-sans-variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 300 700; /* the file's true axis range */
  font-display: swap;
}

@media (max-width: 1199px) {
  :root {
    --text-display-xl: 68px;
    --text-display-l: 56px;
    --text-hero-body: 21px;
    --text-page-title: 48px;
    --text-section-l: 42px;
    --text-section-m: 32px;
    --text-card-l: 27px;
    --gutter: 40px;
    --header-h: 76px;
  }
}

@media (max-width: 809px) {
  :root {
    --text-display-xl: 48px;
    --text-display-l: 42px;
    --text-hero-body: 18px;
    --text-page-title: 42px;
    --text-section-l: 36px;
    --text-section-m: 28px;
    --text-card-l: 25px;
    --text-card: 22px;
    --gutter: 20px;
    --header-h: 68px;
  }
}