/* ============================================================
   tokens.css — Qun Portfolio Design Tokens
   フォント自前ホスト + CSSカスタムプロパティ
   Task 4: self-hosted fonts and design tokens
   ============================================================ */

/* ----------------------------------------------------------
   @font-face: Latin書体
   ---------------------------------------------------------- */
@font-face {
  font-family: "Playfair Display";
  src: url("../fonts/playfair-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
  unicode-range: U+0000-00FF, U+2000-206F;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/plexmono-latin.woff2") format("woff2");
  font-weight: 400 600;
  font-display: swap;
  unicode-range: U+0000-00FF;
}

/* ロゴタイプ用：落ち着いた明朝系セリフ・イタリック（Spectral Italic） */
@font-face {
  font-family: "Spectral";
  src: url("../fonts/spectral-italic.woff2") format("woff2");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0000-00FF;
}

/* ----------------------------------------------------------
   @font-face: JP書体（使用文字サブセット）
   ---------------------------------------------------------- */
@font-face {
  font-family: "Shippori Mincho";
  src: url("../fonts/shippori-jp.woff2") format("woff2");
  font-weight: 500 700;
  font-display: swap;
}

@font-face {
  font-family: "Zen Kaku Gothic New";
  src: url("../fonts/zenkaku-jp.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

/* ----------------------------------------------------------
   :root — Design Tokens
   ---------------------------------------------------------- */
:root {
  /* --- Color: Neutral --- */
  --white: #fff;
  --paper: #FBFCFC;
  --panel: #F0F6F6;
  --panel-2: #E6F1F1;
  --ink: #161A1C;
  --ink-2: #39474A;
  --mist: #6E7C7E;
  --line: #E2EBEB;

  /* --- Color: Teal scale --- */
  --teal-air: #DCEEEF;
  --teal-100: #C3E2E4;
  --teal-300: #8FC4C8;
  --teal-500: #5B9DA2;
  --teal-700: #3E7B80;
  --teal-900: #27565A;

  /* --- Typography: Font stacks --- */
  --logotype: "Spectral", "Hiragino Mincho ProN", Georgia, serif;
  --serif-latin: "Playfair Display", "Hiragino Mincho ProN", serif;
  --serif-jp: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --sans: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", system-ui, sans-serif;
  --mono: "IBM Plex Mono", "SF Mono", ui-monospace, monospace;

  /* --- Layout --- */
  --maxw: 1080px;
  --gut: clamp(20px, 5vw, 64px);

  /* --- Motion / Easing --- */
  --ease-quint: cubic-bezier(.22, 1, .36, 1);
  --ease-back: cubic-bezier(.34, 1.56, .64, 1);
}