/* ============================================================
   tokens.css — design tokens extracted from david-hckh.com
   Source: /assets/BYmwxED6.css (Vue scoped CSS, 55.591 bytes)
   Values are the original ones; names are normalised for reuse.
   ============================================================ */

@font-face {
  font-family: "Urbanist";
  src: url("../fonts/urbanist-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Urbanist";
  src: url("../fonts/urbanist-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Urbanist";
  src: url("../fonts/urbanist-900.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "ProFontWindows";
  src: url("../fonts/pro-font-windows-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "ProFontWindows";
  src: url("../fonts/pro-font-windows-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* --- Palette (exact hex / rgb from the source) --------------- */
  --beige-400: #f5efe6;   /* page background  (--color-beige-400) */
  --beige-500: #f1e5d5;   /* raised surface   (241,229,213)       */
  --beige-600: #e9dec8;   /* hover surface    (233,222,208)       */
  --beige-700: #dfd1bc;   /* deepest beige    (223,209,188)       */

  --ink: #2d2a24;         /* primary text     (--color-black-400) */
  --ink-2: #5f5646;       /* secondary text   (--color-text-300)  */
  --gray-500: #67727c;
  --gray-400: #a9b0b7;

  --orange: #ff8400;      /* accent           (--color-orange-400)*/
  --white: #ffffff;

  --cyan-500: #0086bb;
  --cyan-400: #34bfff;    /* rgb(52,191,255)                      */
  --cyan-text: #e1f5ff;
  --cyan-text-2: #81bdd8;

  --blue-600: #234ba2;
  --blue-500: #052e87;
  --blue-400: #002474;
  --holo-top: #003585;              /* rgb(0,53,133)             */
  --holo-bottom: rgb(0 82 145 / 0.6);

  /* --- Semantic aliases -------------------------------------- */
  --bg: var(--beige-400);
  --surface: var(--beige-500);
  --text: var(--ink);
  --muted: var(--ink-2);
  --line: rgb(223 210 191);         /* --color-grayscale-500     */
  --line-soft: rgb(233 222 208);    /* --color-grayscale-400     */
  --accent: var(--orange);
  --accent-text: var(--white);

  /* --- Type -------------------------------------------------- */
  --font-sans: "Urbanist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "ProFontWindows", ui-monospace, "SFMono-Regular", "Cascadia Code", "JetBrains Mono", monospace;

  --fs-xxs: 12px;
  --fs-xs: 12px;
  --fs-sm: 14px;
  --fs-md: 16px;
  --fs-lg: 18px;
  --fs-xl: 20px;
  --fs-2xl: 26px;
  --fs-title-xs: 22px;
  --fs-title-sm: 28px;
  --fs-title-md: 44px;
  --fs-title-lg: 56px;
  --fs-title-xl: 72px;
  --fs-title-2xl: 88px;
  --fs-title-3xl: 112px;

  --lh-copy: 1.3;
  --lh-title: 1.1;

  /* --- Spacing scale (source: --space-*) --------------------- */
  --sp-xxs: 4px;
  --sp-xs: 8px;
  --sp-sm: 12px;
  --sp-md: 18px;
  --sp-lg: 28px;
  --sp-xl: 36px;
  --sp-2xl: 48px;
  --sp-3xl: 64px;

  --pad: 16px;              /* --space-outer: 16 → 20 → 32 */
  --header-h: 72px;         /* 96px from 840px up         */

  /* --- Shape ------------------------------------------------- */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-2xl: 24px;       /* 48px from 840px up         */
  --radius-pill: 999px;
  --stroke-sm: 1px;
  --stroke-md: 2px;
  --stroke-lg: 4px;

  /* --- Motion (source easing curves) ------------------------- */
  --ease-smooth: cubic-bezier(0.6, 0, 0.25, 1);
  --ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-in: cubic-bezier(0.165, 0.84, 0.44, 1);
  --dur-fast: 0.15s;
  --dur: 0.3s;
  --dur-slow: 0.6s;
  --dur-route: 0.5s;

  /* --- Layering ---------------------------------------------- */
  --z-base: 0;
  --z-layout: 10;
  --z-header: 90;
  --z-preloader: 100;
  --z-cursor: 9999;

  --shell: 1920px;          /* --breakpoint-xxxl */
}

@media (min-width: 840px) {
  :root {
    --header-h: 96px;
    --radius-2xl: 48px;
  }
}
@media (min-width: 1280px) {
  :root { --pad: 20px; }
}
@media (min-width: 1600px) {
  :root { --pad: 32px; }
}