/* --------------------------------------------------
  ハーフレディング管理変数
-------------------------------------------------- */
@property --hl {
  syntax: '<length>';
  inherits: true;
  initial-value: 0.25rem;
}

/* --------------------------------------------------
  typography・spacing トークンの定義
-------------------------------------------------- */
:root {
  /** 
   * font-size
   */
  --REM: clamp(0.95rem, 0.915rem + 0.15vw, 1.05rem); /* 変動幅: 360px ~ 1400px */

  // font-size: 倍音列でのスケーリング。単位は em
  --fz--base: var(--REM);
  --fz-mol: 8; // 倍音列の分母（7~ に対応）
  --fz--5xl: calc(1em * var(--fz-mol) / (var(--fz-mol) - 6));
  --fz--4xl: calc(1em * var(--fz-mol) / (var(--fz-mol) - 5));
  --fz--3xl: calc(1em * var(--fz-mol) / (var(--fz-mol) - 4));
  --fz--2xl: calc(1em * var(--fz-mol) / (var(--fz-mol) - 3));
  --fz--xl: calc(1em * var(--fz-mol) / (var(--fz-mol) - 2));
  --fz--l: calc(1em * var(--fz-mol) / (var(--fz-mol) - 1));
  --fz--m: 1em;
  --fz--s: calc(1em * var(--fz-mol) / (var(--fz-mol) + 1));
  --fz--xs: calc(1em * var(--fz-mol) / (var(--fz-mol) + 2));
  --fz--2xs: calc(1em * var(--fz-mol) / (var(--fz-mol) + 3));

  /** 
   * font-family
   *   Memo: system-ui は　游ゴシックが適用されてしまう。
   */
  // Base font: -apple-system: safari&firefox / 'BlinkMacSystemFont': Chrome / 'Hiragino Sans': Mac / 'Segoe UI Emoji': Windows用
  --ff--base: -apple-system, 'BlinkMacSystemFont', 'Hiragino Sans', sans-serif, 'Segoe UI Emoji';

  // Mono font: SFMono, Menlo: Mac  / Consolas: Win / Liberation Mono: Linux
  --ff--mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  // Accent font: This is just one example.
  --ff--accent: 'Garamond', 'Baskerville', 'Times New Roman', serif;

  /** 
   * font-weight
   */
  --fw--light: 300;
  --fw--normal: 400;
  --fw--bold: 600;

  /** 
   * letter-spacing
   */
  --lts--base: normal;
  --lts--s: -0.05em;
  --lts--l: 0.05em;
  // --lts--xl: 0.125em;

  /** 
   * ハーフレディング: unit の倍数で構成する
   */
  --hl-unit: calc(var(--REM) * 0.125); /* 計算単位 ≒ 2px */

  --hl--xs: var(--hl-unit);
  --hl--s: calc(var(--hl-unit) * 2);
  --hl--base: calc(var(--hl-unit) * 3);
  --hl--l: calc(var(--hl-unit) * 4);
  // --hl--xl: calc(var(--hl-unit) * 5);

  /** 
   * スペーシング: フィボナッチ数列をベースにする
   */
  --s-unit: calc(var(--REM) * 0.5); // ≒ 8px

  --s5: calc(0.5 * var(--s-unit)); // 例外
  --s10: var(--s-unit);
  --s15: calc(1.5 * var(--s-unit)); // 例外
  --s20: calc(2 * var(--s-unit));
  --s30: calc(3 * var(--s-unit));
  --s40: calc(5 * var(--s-unit));
  --s50: calc(8 * var(--s-unit));
  --s60: calc(13 * var(--s-unit));
  --s70: calc(21 * var(--s-unit));
  --s80: calc(34 * var(--s-unit));
}