/* ============================================================
   SOUBI FOOD design tokens — CSS変数版
   このファイルは tokens.json から build_tokens_css.py で作る。直接編集しない。
   命名は --color-text-primary 形式で tokens.json の名前と対応する。
   ============================================================ */

:root {
  /* --- primitive: color --- */
  --color-kinari: #FBF7EE;
  --color-sumi: #2B2722;
  --color-yellow: #F9DA22;
  --color-pale-yellow: #FFF3C4;
  --color-teal: #00808C;
  --color-teal-text: #00757F;
  --color-sumi-soft: #615D57;
  --color-yellow-hover: #EFD000;
  --color-sumi-hover: #3F3B36;
  --color-white: #FFFFFF;
  --color-yellow-dark: #F5C636;
  --color-night-bg-1: #161210;
  --color-night-bg-2: #1F1813;
  --color-night-bg-3: #0E0B09;
  --color-night-cream: #F2EADC;
  --color-night-cream-soft: #B8AE9D;
  /* イラストの中だけで使う14色。画面の背景・文字・部品には使わない */
  --color-illust-cobalt: #2B4FD6;
  --color-illust-coral: #EE5340;
  --color-illust-lime: #AED136;
  --color-illust-purple: #7B3FB8;
  --color-illust-gold: #F2C13D;
  --color-illust-pink: #F07DD0;
  --color-illust-teal-green: #1E9090;
  --color-illust-orange: #EE6A2C;
  --color-illust-outline: #1A1A1A;
  --color-illust-light-green: #C5E29B;
  --color-illust-sky: #4FA8E0;
  --color-illust-turquoise: #29B6C4;
  --color-illust-lavender: #B89AE8;
  --color-illust-olive: #8FA838;
  --color-illust-soft-green: #E6EFD2;
  --color-illust-soft-lavender: #E7DFF3;
  --color-illust-soft-turquoise: #D3ECEC;
  --color-illust-soft-coral: #F6DDD3;
  --color-illust-soft-gold: #F6E7BD;

  /* --- semantic: color（制作はこの層を使う） --- */
  --color-text-primary: var(--color-sumi);
  --color-text-secondary: var(--color-sumi-soft);
  --color-text-link: var(--color-teal-text);
  --color-bg-base: var(--color-kinari);
  --color-bg-plane: var(--color-yellow);
  --color-accent-brand: var(--color-yellow);
  --color-accent-brand-hover: var(--color-yellow-hover);
  --color-action-strong: var(--color-sumi);
  --color-action-strong-hover: var(--color-sumi-hover);
  --color-bg-highlight: var(--color-pale-yellow);
  --color-accent-info: var(--color-teal);
  --color-surface-card: var(--color-white);
  --color-border-hairline: var(--color-sumi);
  --color-border-line: var(--color-sumi);
  --color-focus-ring: var(--color-sumi);
  --color-bg-dark-1: var(--color-night-bg-1);
  --color-bg-dark-2: var(--color-night-bg-2);
  --color-bg-dark-3: var(--color-night-bg-3);
  --color-text-on-dark: var(--color-night-cream);
  --color-text-on-dark-soft: var(--color-night-cream-soft);
  --color-accent-on-dark: var(--color-yellow-dark);

  /* --- space --- */
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-56: 56px;
  --space-64: 64px;
  --space-72: 72px;
  --space-80: 80px;
  --space-88: 88px;
  --space-96: 96px;
  --space-112: 112px;
  --space-128: 128px;

  /* --- radius --- */
  --radius-field: 16px;
  --radius-button: 999px;
  --radius-card: 32px;
  --radius-panel: 48px;
  --radius-thumb: 0px;
  --radius-card-sharp: 32px;
  --radius-card-soft: 32px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* --- layout --- */
  --layout-breakpoint-md: 768px;
  --layout-breakpoint-lg: 1024px;
  --layout-content-max: 1200px;
  --layout-text-max: 640px;
  --layout-gutter-sp: 24px;
  --layout-gutter-pc: 48px;
  --layout-target-min: 24px;
  --layout-target-main: 44px;
  --layout-thumb-ratio: 16 / 9;
  --layout-reading-columns: 3;
  --layout-reading-per-page: 18;
  --layout-reading-figure-max: 1040px;
  --layout-focus-offset: 3px;

  /* --- 線の太さ（スマホ2px、幅1024px以上で3px） --- */
  --border-width-line: 2px;
  --border-width-hairline: 1px;

  /* --- 書体 --- */
  --font-heading: "Zen Kaku Gothic New", sans-serif;
  --font-body: "Zen Kaku Gothic New", sans-serif;
  --font-latin: "Barlow Semi Condensed", "Zen Kaku Gothic New", sans-serif;
  --font-reading: "Zen Old Mincho", serif;
  --font-lp-mincho: "Zen Old Mincho", serif;
  --font-lp-latin-serif: "Cormorant Garamond", serif;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  /* --- 文字の大きさ（幅375pxで min、1440pxで max） --- */
  --font-size-h1: clamp(26px, 21.07px + 1.315vw, 40px);
  --font-size-tagline: clamp(34px, 26.25px + 2.066vw, 56px);
  --font-size-h2: clamp(22px, 18.48px + 0.939vw, 32px);
  --font-size-h3: clamp(18px, 16.59px + 0.376vw, 22px);
  --font-size-body: clamp(15px, 14.30px + 0.188vw, 17px);
  --font-size-small: 14px;
  --font-size-latin-heading: clamp(32px, 23.55px + 2.254vw, 56px);
  --font-size-latin-label: clamp(12px, 11.30px + 0.188vw, 14px);
  --font-size-reading-masthead: clamp(36px, 27.55px + 2.254vw, 60px);
  --font-size-reading-title: clamp(26px, 19.66px + 1.690vw, 44px);
  --font-size-reading-lead: clamp(23px, 19.13px + 1.033vw, 34px);
  --font-size-reading-card: clamp(17px, 15.94px + 0.282vw, 20px);
  --letter-spacing-body: 0.06em;
  --letter-spacing-heading: 0.12em;
  --letter-spacing-latin: 0.06em;
  --letter-spacing-label: 0.12em;
  --letter-spacing-reading-masthead: 0.2em;
  --letter-spacing-reading-title: 0.08em;
  --line-height-heading: 1.45;
  --line-height-latin: 1.1;
  --line-height-small: 1.6;
  --line-height-reading-title: 1.6;
  --line-height-reading-card: 1.7;
  --line-height-reading-masthead: 1.2;
  --line-height-reading-try: 1.8;
  --line-height-body: 1.75; /* スマホ。PCは下の指定で上書き */

  /* --- 動き --- */
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-story: 900ms;
  --easing-standard: cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (min-width: 1024px) {
  :root {
    --border-width-line: 3px;
    --line-height-body: 1.9;
  }
}

/* 動きを減らす設定の人には、すべての動きを一瞬で終える（02_visual ⑪） */
@media (prefers-reduced-motion: reduce) {
  :root { --duration-fast: 0ms; --duration-base: 0ms; --duration-story: 0ms; }
}

/* ============================================================
   ダーク面（販売LP・夜コンテキスト限定。D7）。ブランドサイトでは使わない。
   ============================================================ */
[data-theme="dark"] {
  --color-bg-base: var(--color-night-bg-1);
  --color-surface-card: var(--color-night-bg-2);
  --color-text-primary: var(--color-night-cream);
  --color-accent-brand: var(--color-yellow-dark);
  --color-accent-info: var(--color-night-cream-soft);
  --color-border-hairline: rgba(242, 234, 220, 0.12);
}