/*
 * デザイントークン。 Figma の variables に対応するカスタムプロパティを :root に置く。
 *
 * style.css から切り出してあるのは、ブロックエディタのキャンバス (iframe) にも
 * 同じトークンを届ける必要があるため。 キャンバスの中では enqueue_block_assets
 * しか発火せず、そこへ style.css 本体を丸ごと流すと body / img などのグローバル
 * 規則が管理画面まで届いてしまうので、副作用のない :root だけを別ハンドルにして
 * いる (functions.php の tcd_enqueue_block_assets 参照)。
 *
 * URL は assets/css/ からの相対で書くこと。
 */
:root {
  /* Neutral (Figma neutral/*) */
  --color-neutral-black: #000000;
  --color-neutral-white: #ffffff;
  --color-neutral-gray-100: #dedede;
  --color-neutral-gray-300: #9c9c9c;
  --color-neutral-gray-700: #363636;

  /* Brand (Figma brand/*) */
  --color-brand-primary-green: #008714;
  --color-brand-primary-yellow: #ffd200;
  --color-brand-primary-blue: #00a0f0;

  /* Text (Figma semantic/text/*) */
  --color-text-default: #363636;
  --color-text-inverted: #ffffff;
  --color-text-light: #5a5a5a;
  --color-text-placeholder: #9c9c9c;
  --color-text-brand-primary-green: #008714;

  /* Fill (Figma semantic/fill/*) */
  --color-fill-base: #eeeeeb;
  --color-fill-base-dark: #e2e2db;
  --color-fill-dark: #363636;
  --color-fill-light: #ffffff;
  --color-fill-brand-primary: #008714;
  --color-fill-brand-secondary: #ffd200;
  --color-fill-brand-tertiary: #00a0f0;

  /* Background (Figma semantic/background/*) */
  --color-background-default: #e2e2db;
  --color-background-light: #eeeeeb;
  --color-background-ultra-light: #ffffff;
  --color-background-dark: #363636;

  /* Border colors (Figma semantic/border/*) */
  --color-border-default: #363636;
  --color-border-light: #dedede;
  --color-border-inverted: #ffffff;
  --color-border-little-thin: #5a5a5a;
  --color-border-brand-primary-green: #008714;

  /* Border widths (Figma semantic/border/{strong,heavy}) */
  --border-width-strong: 2px;
  --border-width-heavy: 4px;

  /* Spacing (4px grid, Figma semantic/scale/*) */
  --space-0: 0;
  --space-0-5: 2px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-28: 112px;
  --space-30: 120px;
  --space-32: 128px;
  --space-40: 160px;
  --space-48: 192px;

  /* Radius (Figma semantic/radius/*) */
  --radius-small: 8px;
  --radius-default: 24px;
  --radius-large: 40px;
  --radius-full: 9999px;

  /* Typography: family (Figma family/*) */
  --font-family-jp: "Gen Interface JP", "Hiragino Sans", "Yu Gothic", sans-serif;
  --font-family-jp-title: "Zen Maru Gothic", "Hiragino Sans", "Yu Gothic", sans-serif;
  --font-family-en: "Nunito", sans-serif;

  /* Typography: weight (Figma weight/*) */
  --font-weight-regular: 400;
  --font-weight-bold: 600;

  /* Typography: size — raw text scale (Figma semantic/font-size/text-*) */
  --font-size-text-10: 10px;
  --font-size-text-12: 12px;
  --font-size-text-14: 14px;
  --font-size-text-16: 16px;
  --font-size-text-18: 18px;
  --font-size-text-20: 20px;
  --font-size-text-24: 24px;
  --font-size-text-32: 32px;
  --font-size-text-40: 40px;
  --font-size-text-48: 48px;
  --font-size-text-64: 64px;
  --font-size-text-72: 72px;

  /* Typography: size — body (Figma semantic/font-size/body/*) */
  --font-size-body-x-small: 12px;
  --font-size-body-small: 14px;
  --font-size-body-base: 16px;
  --font-size-body-middle: 18px;
  --font-size-body-large: 24px;

  /* Typography: size — heading (Figma semantic/font-size/heading/*) */
  --font-size-heading-level-1: 56px;
  --font-size-heading-level-2: 40px;
  --font-size-heading-level-3: 32px;
  --font-size-heading-level-4: 24px;

  /* Typography: line-height (Figma Body styles) */
  --line-height-default: 1.5;
  --line-height-relaxed: 2;

  /* Layout (Figma max-width/*) */
  --max-width-narrow: 880px;
  --max-width-default: 1040px;
  --max-width-wide: 1440px;
  --breakpoint-pc: 769px;
}