@layer tokens {
  @font-face {
    font-family: "Noto Sans TC";
    src: url("/2nd/assets/fonts/noto-sans-tc-var.woff2") format("woff2");
    font-style: normal;
    font-weight: 400 700;
    font-display: optional;
  }

  @font-face {
    font-family: "IBM Plex Mono";
    src: url("/2nd/assets/fonts/ibm-plex-mono-400.woff2") format("woff2");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
  }

  @font-face {
    font-family: "IBM Plex Mono";
    src: url("/2nd/assets/fonts/ibm-plex-mono-500.woff2") format("woff2");
    font-style: normal;
    font-weight: 500;
    font-display: swap;
  }

  :root {
    --ink-950: #060A13;
    --ink-900: #0A101F;
    --ink-800: #111A2F;
    --line-dark: rgba(158, 177, 222, .14);
    --text-hi: #EAF0FA;
    --text-mid: #A7B3CC;
    --text-low: #76839F;
    --gold-400: #FFC24B;
    --gold-500: #F2B84B;
    --gold-600: #C99231;
    --gold-ink: #8A6210;
    --gold-glow: rgba(242, 184, 75, .22);
    --paper-500: #EFEBDF;
    --paper-400: #F5F2E9;
    --ink-on-paper: #141B2C;
    --ink-soft-paper: #3E4A66;
    --line-paper: rgba(20, 27, 44, .16);

    --font-sans: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
    --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", "SFMono-Regular", monospace;
    --fs-hero: clamp(2.75rem, 1.2rem + 7vw, 6rem);
    --fs-h2: clamp(1.9rem, 1.1rem + 3.2vw, 3.4rem);
    --fs-h3: clamp(1.25rem, 1.05rem + .9vw, 1.6rem);
    --fs-body: clamp(1rem, .95rem + .25vw, 1.125rem);
    --fs-small: .875rem;
    --fs-micro: .75rem;

    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 24px;
    --sp-6: 32px;
    --sp-7: 48px;
    --sp-8: 64px;
    --sp-9: 96px;
    --sp-10: 128px;
    --sp-11: 176px;
    --container: 1200px;
    --gutter: clamp(16px, 4vw, 32px);
    --section-pad: clamp(96px, 12vh, 176px);
    --radius-s: 6px;
    --radius-m: 14px;
    --t-fast: 160ms;
    --t-base: 240ms;
    --t-slow: 420ms;
    --t-cine: 700ms;
    --ease-standard: cubic-bezier(.22, .61, .36, 1);
    --ease-emph: cubic-bezier(.16, 1, .3, 1);
    --ease-inout: cubic-bezier(.65, 0, .35, 1);
    --stagger: 60ms;
  }

  @media (max-width: 767px) {
    :root {
      --font-sans: "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
    }
  }

  @media (prefers-contrast: more) {
    :root {
      --text-low: var(--text-mid);
      --line-dark: rgba(158, 177, 222, .3);
      --line-paper: rgba(20, 27, 44, .3);
    }
  }
}