/* ==========================================================================
   tokens.css — mycred-jiko デザイントークン
   巻き爪改善センター（assets/css/tokens.css）と同じ体系・同じ書体を採用し、
   ブランドカラーのみ交通事故サイトのコーラルを維持している。
   コンポーネント側では生の hex / px を書かず、必ずここの変数を参照すること。
   ========================================================================== */

:root {
  /* ------------------------------------------------------------------
     1. Typography — 巻き爪センターと共通
     ------------------------------------------------------------------ */
  --font-family-primary: "Open Sans";
  --font-family-stack: "Open Sans", "Noto Sans JP", "游ゴシック", YuGothic,
    "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Verdana, "メイリオ",
    Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  --font-family-serif: "Noto Serif JP", "游明朝", YuMincho,
    "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", serif;

  --font-size-xs: 12px;
  --font-size-sm: 13px;
  --font-size-md: 14px;
  --font-size-lg: 15px;
  --font-size-xl: 16px;
  --font-size-2xl: 17px;
  --font-size-3xl: 18px;
  --font-size-4xl: 21px;
  --font-size-5xl: 24px;
  --font-size-6xl: 28px;
  --font-size-7xl: 34px;
  --font-size-8xl: 42px;
  --font-size-9xl: 56px;

  --font-size-base: var(--font-size-xl);
  --font-weight-base: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --font-weight-black: 900;
  --line-height-tight: 1.35;
  --line-height-normal: 1.6;
  --line-height-loose: 1.9;
  --letter-spacing-tight: 0.01em;
  --letter-spacing-wide: 0.08em;

  /* ------------------------------------------------------------------
     2. Color — ブランド（コーラル）を維持したプリミティブ
     ------------------------------------------------------------------ */
  --color-primitive-coral-50:  #FFF5F2;
  --color-primitive-coral-100: #FFE7E0;
  --color-primitive-coral-200: #FBD0C6;
  --color-primitive-coral-300: #F4A595;
  --color-primitive-coral:     #F07060;  /* ブランド primary */
  --color-primitive-coral-600: #E0573F;  /* 面：hover */
  --color-primitive-coral-700: #C2452F;  /* 文字：白 4.7 / coral-50 上 5.0 */

  --color-primitive-ink:      #1A1A2E;   /* 見出し・濃色地 */
  --color-primitive-ink-700:  #36384A;
  --color-primitive-ink-600:  #555A66;   /* 本文 */
  --color-primitive-ink-500:  #6E7380;   /* 補足（白地 5.2:1） */
  --color-primitive-ink-400:  #8A8F9C;   /* 微弱（大きめ文字専用） */
  --color-primitive-white:    #ffffff;
  --color-primitive-line:      #ECEDF1;
  --color-primitive-line-soft: #F3F4F7;
  --color-primitive-surface-soft: #FAFAFB;
  --color-primitive-teal:      #12706A;  /* フォーカス・信頼の補助色 */

  /* セマンティックトークン — コンポーネントはこちらのみを参照する */
  --color-text-primary: var(--color-primitive-ink);
  --color-text-body: var(--color-primitive-ink-600);
  --color-text-muted: var(--color-primitive-ink-500);
  --color-text-faint: var(--color-primitive-ink-400);
  --color-text-inverse: var(--color-primitive-white);
  --color-text-accent: var(--color-primitive-coral-700);
  --color-text-on-accent: var(--color-primitive-white);

  --color-surface-base: var(--color-primitive-white);
  --color-surface-subtle: var(--color-primitive-surface-soft);
  --color-surface-tint: var(--color-primitive-coral-50);
  --color-surface-inverse: var(--color-primitive-ink);
  --color-surface-accent: var(--color-primitive-coral);

  --color-border-default: var(--color-primitive-line);
  --color-border-soft: var(--color-primitive-line-soft);
  --color-border-accent: var(--color-primitive-coral-100);
  --color-focus-ring: var(--color-primitive-teal);

  --color-action-primary-bg: var(--color-primitive-coral);
  --color-action-primary-bg-hover: var(--color-primitive-coral-600);
  --color-action-primary-fg: var(--color-primitive-white);

  /* ------------------------------------------------------------------
     3. Spacing — 巻き爪センターと共通のスケール
     ------------------------------------------------------------------ */
  --space-1: 1px;
  --space-2: 2px;
  --space-3: 5px;
  --space-4: 8px;
  --space-5: 10px;
  --space-6: 12px;
  --space-7: 13px;
  --space-8: 14px;
  --space-9: 20px;
  --space-10: 28px;
  --space-11: 40px;
  --space-12: 56px;
  --space-13: 80px;
  --space-14: 112px;

  /* ------------------------------------------------------------------
     4. Radius / Shadow / Motion
     ------------------------------------------------------------------ */
  --radius-xs: 2px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  --shadow-sm: 0 1px 2px rgba(26,26,46,.04), 0 2px 8px rgba(26,26,46,.05);
  --shadow-md: 0 4px 14px rgba(26,26,46,.07), 0 12px 28px rgba(26,26,46,.06);
  --shadow-lg: 0 12px 34px rgba(26,26,46,.10), 0 24px 56px rgba(26,26,46,.10);
  --shadow-accent: 0 8px 22px rgba(240,112,96,.30);

  --motion-duration-instant: 160ms;
  --motion-duration-fast: 220ms;
  --motion-duration-slow: 300ms;
  --motion-ease-standard: cubic-bezier(0.2, 0, 0.2, 1);
  --motion-ease-emphasized: cubic-bezier(0.22, 1, 0.36, 1);

  /* ------------------------------------------------------------------
     5. Layout
     ------------------------------------------------------------------ */
  --layout-max-width: 1120px;
  --layout-narrow-width: 780px;
  --layout-gutter: var(--space-9);
  --layout-header-height: 64px;
}

@media (min-width: 768px) {
  :root {
    --layout-gutter: var(--space-10);
    --layout-header-height: 72px;
  }
}