/* design-tokens.md → CSS variables. Values from template measurement. */

:root {
  --font-sans: "Switzer", Inter, sans-serif;
  --font-serif: "Instrument Serif", serif;
  --font-cjk-jp: "Noto Sans JP", "Noto Sans SC", sans-serif;
  --font-cjk-sc: "Noto Sans SC", "Noto Sans JP", sans-serif;
  --font-serif-jp: "Noto Serif JP", "Instrument Serif", serif;
  --font-serif-sc: "Noto Serif SC", "Instrument Serif", serif;

  --bg-light: #eaeaea;
  --bg-dark: #151515;
  --bg-footer: #1a1a1a;
  --bg-black: #000000;
  --bg-white: #ffffff;

  --surface-on-light: rgba(0, 0, 0, 0.05);
  --surface-on-light-hover: rgba(0, 0, 0, 0.08);
  --surface-on-dark: rgba(255, 255, 255, 0.05);
  --surface-on-dark-active: rgba(255, 255, 255, 0.1);
  --surface-on-image: rgba(255, 255, 255, 0.25);
  --surface-scrim: rgba(0, 0, 0, 0.25);
  --surface-scrim-light: rgba(0, 0, 0, 0.1);
  --surface-frosted-white: rgba(255, 255, 255, 0.8);
  --border-hairline: rgba(255, 255, 255, 0.1);

  --text-primary-light: #000000;
  --text-primary-light-soft: #262626;
  --text-secondary-light: rgba(0, 0, 0, 0.6);
  --text-tertiary-light: rgba(0, 0, 0, 0.5);
  --text-muted: #868686;
  --text-primary-dark: #ffffff;
  --text-secondary-dark: rgba(255, 255, 255, 0.8);
  --text-tertiary-dark: rgba(255, 255, 255, 0.6);
  --text-disabled-dark: rgba(255, 255, 255, 0.4);

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 24px;
  --radius-section: 40px;
  --radius-device: 49px;
  --radius-full: 50px;
  --radius-indicator: 20px;
  --radius-hairline: 4px;
  --corner-shape-fallback: 0.752;
  --one-if-corner-shape-supported: var(--corner-shape-fallback);

  --container: 1320px;
  --gutter: 60px;
  --gutter-mobile: 20px;
  --text-col: 670px;
  --section-pad-y: 160px;
  --section-pad-y-mobile: 120px;
  --card-gap: 12px;

  --blur-ui: 10px;
  --blur-overlay: 20px;

  --ease-hero: cubic-bezier(0.12, 0.23, 0.5, 1);
  --ease-nav: cubic-bezier(0.53, 0, 0.47, 1);
  --ease-card: cubic-bezier(0.44, 0, 0.56, 1);
  --ease-loader: cubic-bezier(0.58, 0, 0.33, 1);
  --ease-label: cubic-bezier(0.12, 0.23, 0.38, 1);
  --ease-burger: cubic-bezier(0.73, 0, 0.16, 1);

  --nav-top: 30px;
  --nav-top-mobile: 16px;

  --fs-display-xl: 120px;
  --lh-display-xl: 84%;
  --ls-display-xl: -0.04em;
  --fs-display-l: 96px;
  --lh-display-l: 95%;
  --ls-display-l: -0.03em;
  --fs-h1: 66px;
  --lh-h1: 100%;
  --ls-h1: 0;
  --fs-h2: 46px;
  --lh-h2: 95%;
  --ls-h2: -0.03em;
  --fs-h3: 32px;
  --lh-h3: 120%;
  --ls-h3: -0.02em;
  --fs-h3-weak: 32px;
  --lh-h3-weak: 110%;
  --fs-h4: 24px;
  --lh-h4: 120%;
  --ls-h4: -0.02em;
  --fs-h5: 20px;
  --lh-h5: 95%;
  --ls-h5: -0.02em;
  --fs-body-l: 20px;
  --lh-body-l: 120%;
  --ls-body-l: -0.02em;
  --fs-body-m: 18px;
  --lh-body-m: 120%;
  --ls-body-m: -0.02em;
  --fs-body-s: 16px;
  --lh-body-s: 120%;
  --ls-body-s: -0.02em;
  --fs-ui: 16px;
  --lh-ui: 95%;
  --ls-ui: -0.02em;
  --fs-label: 14px;
  --lh-label: 95%;
  --ls-label: 0;
}

@supports (corner-shape: superellipse(1.5)) {
  :root {
    --one-if-corner-shape-supported: 1;
  }
}

html[lang="ja"] {
  --font-sans: "Switzer", "Noto Sans JP Optical", "Noto Sans SC Optical", Inter, sans-serif;
  --font-cjk-jp: "Switzer", "Noto Sans JP Optical", sans-serif;
  --font-serif-em: "Noto Serif JP", "Instrument Serif", serif;
}

html[lang="zh"] {
  --font-sans: "Switzer", "Noto Sans SC Optical", "Noto Sans JP Optical", Inter, sans-serif;
  --font-cjk-sc: "Switzer", "Noto Sans SC Optical", sans-serif;
  --font-serif-em: "Noto Serif SC", "Instrument Serif", serif;
}

html[lang="ja"],
html[lang="zh"] {
  --cjk-display: 0.94;
  --cjk-title: 0.96;
  --cjk-lh-display: 1.15;
  --cjk-lh-title: 1.5;
  --cjk-lh-body: 1.6;
  --cjk-lh-ui: 1;
  --cjk-ls-display: -0.01em;
  --cjk-ls-title: 0em;
  --cjk-ls-body: 0.02em;
}

html[lang="en"] {
  --font-serif-em: "Instrument Serif", serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  background: var(--bg-light);
  color: var(--text-primary-light);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-body-s);
  line-height: var(--lh-body-s);
  letter-spacing: var(--ls-body-s);
  -webkit-font-smoothing: antialiased;
}

html {
  scrollbar-width: none;
}

html::-webkit-scrollbar {
  display: none;
}

html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

button:focus-visible,
a:focus-visible {
  outline: 2px solid #000;
  outline-offset: 2px;
}

.dark button:focus-visible,
.dark a:focus-visible,
.hero button:focus-visible,
.hero a:focus-visible {
  outline-color: #fff;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.container {
  width: min(100% - (var(--gutter) * 2), var(--container));
  margin-inline: auto;
}

.squircle-sm {
  border-radius: calc(var(--radius-sm) * var(--one-if-corner-shape-supported));
  corner-shape: superellipse(1.5);
}

.squircle-md {
  border-radius: calc(var(--radius-md) * var(--one-if-corner-shape-supported));
  corner-shape: superellipse(1.5);
}

.squircle-lg {
  border-radius: calc(var(--radius-lg) * var(--one-if-corner-shape-supported));
  corner-shape: superellipse(1.5);
}

.type-display-xl {
  font-size: var(--fs-display-xl);
  font-weight: 500;
  line-height: var(--lh-display-xl);
  letter-spacing: var(--ls-display-xl);
}

.type-display-l {
  font-size: var(--fs-display-l);
  font-weight: 400;
  line-height: var(--lh-display-l);
  letter-spacing: var(--ls-display-l);
}

.type-h1 {
  font-size: var(--fs-h1);
  font-weight: 500;
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-h1);
}

.type-h2 {
  font-size: var(--fs-h2);
  font-weight: 400;
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
}

.type-h3 {
  font-size: var(--fs-h3);
  font-weight: 500;
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-h3);
}

.type-h4 {
  font-size: var(--fs-h4);
  font-weight: 500;
  line-height: var(--lh-h4);
  letter-spacing: var(--ls-h4);
}

.type-h5 {
  font-size: var(--fs-h5);
  font-weight: 500;
  line-height: var(--lh-h5);
  letter-spacing: var(--ls-h5);
}

.type-body-l {
  font-size: var(--fs-body-l);
  font-weight: 500;
  line-height: var(--lh-body-l);
  letter-spacing: var(--ls-body-l);
}

.type-body-m {
  font-size: var(--fs-body-m);
  font-weight: 500;
  line-height: var(--lh-body-m);
  letter-spacing: var(--ls-body-m);
}

.type-body-s {
  font-size: var(--fs-body-s);
  font-weight: 500;
  line-height: var(--lh-body-s);
  letter-spacing: var(--ls-body-s);
}

.type-ui {
  font-size: var(--fs-ui);
  font-weight: 500;
  line-height: var(--lh-ui);
  letter-spacing: var(--ls-ui);
}

.type-label {
  font-size: var(--fs-label);
  font-weight: 500;
  line-height: var(--lh-label);
  letter-spacing: var(--ls-label);
}

.em-serif {
  font-family: var(--font-serif-em);
  font-weight: 400;
  font-style: italic;
}

html[lang="ja"] .em-serif,
html[lang="zh"] .em-serif {
  font-style: normal;
}

@media (max-width: 809.98px) {
  :root {
    --gutter: 20px;
    --nav-top: 16px;
    --section-pad-y: 120px;
    --fs-display-xl: 56px;
    --lh-display-xl: 94%;
    --fs-h1: 50px;
    --fs-h3: 28px;
  }

  .container {
    width: min(100% - 40px, var(--container));
  }
}

@media (max-width: 480px) {
  :root {
    --fs-display-l: 42px;
    --lh-display-l: 1.12;
  }
}