/* ============================================
   Little Beans - Design Tokens
   ============================================ */

:root {
  /* Color Palette - 豆を連想させる配色 */
  --color-paper: #FAF7F2;        /* 生成り - 主背景 */
  --color-paper-soft: #F2EDE4;   /* 生成り（やや濃） */
  --color-ink: #2A1F18;          /* 焙煎深煎り - 本文 */
  --color-ink-soft: #4A3A2E;     /* 焙煎中煎り - 副次テキスト */
  --color-ink-mute: #8A7A6E;     /* キャラメル - キャプション */
  --color-bean: #6B4A2E;         /* 豆色 - アクセント */
  --color-bean-light: #B89B7A;   /* 浅煎り - 装飾 */
  --color-roast-light: #C9A887;  /* 浅煎り - アニメ用 */
  --color-roast-mid: #8B6644;    /* 中煎り - アニメ用 */
  --color-line: #E5DDD0;         /* 罫線・区切り */
  --color-line-soft: #EFE9DE;    /* 罫線（薄） */

  /* Typography */
  --font-serif-jp: "Noto Serif JP", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif;
  --font-sans-jp: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
  --font-display: "Cormorant Garamond", "Noto Serif JP", serif;
  --font-mono: "JetBrains Mono", "Courier New", monospace;

  /* Type Scale */
  --text-xs: 0.75rem;     /* 12px */
  --text-sm: 0.875rem;    /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-md: 1.125rem;    /* 18px */
  --text-lg: 1.375rem;    /* 22px */
  --text-xl: 1.75rem;     /* 28px */
  --text-2xl: 2.25rem;    /* 36px */
  --text-3xl: 3rem;       /* 48px */
  --text-4xl: 4.5rem;     /* 72px */
  --text-5xl: 6rem;       /* 96px */

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;
  --space-40: 10rem;

  /* Layout */
  --container-narrow: 720px;
  --container-base: 960px;
  --container-wide: 1200px;
  --container-full: 1440px;

  /* Transitions */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 200ms;
  --duration-base: 400ms;
  --duration-slow: 800ms;

  /* Letter Spacing */
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.05em;
  --tracking-wider: 0.1em;
  --tracking-widest: 0.25em;
}