/*
  data/design.json と同じ名前・同じ値で定義する。値を変えるときは design.json を先に直す。
  名前の付け方（_ は - にする）
    colors.<x>.css                    → そのまま（--bg など）
    typography.family                 → --font-family
    typography.weights.<x>            → --fw-<x>
    typography.scale_px.<x>           → --fs-<x>
    typography.line_height.<x>        → --lh-<x>
    layout.screen_padding_px.<x>      → --pad-<x>
    layout.gap_px.<x>                 → --gap-<x>
    layout.radius_px.<x>              → --radius-<x>
    layout.border_px.<x>              → --bw-<x>
    layout.min_touch_px               → --min-touch
    components.<x>.height_px          → --<x>-height（範囲のときは小さいほう）
    components.<x>.size_px            → --<x>-size（[幅, 高さ] のときは --<x>-w / --<x>-h）
    components.<x>.padding_px         → --<x>-padding
*/
:root {
  /* colors */
  --bg: #0B1B3A;
  --surface: #14284F;
  --surface-active: #1D3F7A;
  --border: #2F4C85;
  --border-active: #5B86D6;
  --text: #FFFFFF;
  --text-sub: #B8C7E6;
  --accent: #F2C14E;
  --correct: #6FD3A5;
  --try-again: #F2A65A;
  --cta-bg: #FFFFFF;
  --cta-text: #0B1B3A;

  /* typography */
  --font-family: 'Hiragino Maru Gothic ProN', 'Hiragino Sans', 'Noto Sans JP', sans-serif;
  --fw-regular: 500;
  --fw-bold: 700;
  --fs-hero-name: 54px;
  --fs-journey-name: 44px;
  --fs-points-big: 34px;
  --fs-screen-title: 32px;
  --fs-result-title: 34px;
  --fs-question: 26px;
  --fs-primary-button: 24px;
  --fs-choice: 22px;
  --fs-body: 18px;
  --fs-genre-label: 18px;
  --fs-sub: 15px;
  --fs-caption: 13px;
  --lh-title: 1.2;
  --lh-body: 1.5;

  /* layout */
  --pad-top: 24px;
  --pad-side: 20px;
  --pad-bottom: 28px;
  --gap-section: 14px;
  --gap-tight: 8px;
  --gap-grid: 12px;
  --radius-icon-button: 14px;
  --radius-button-primary: 18px;
  --radius-button-secondary: 16px;
  --radius-choice: 16px;
  --radius-tile: 20px;
  --radius-card: 22px;
  --radius-feedback-card: 24px;
  --radius-pill: 22px;
  --radius-gauge: 8px;
  --bw-default: 1px;
  --bw-emphasis: 2px;
  --min-touch: 60px;

  /* components */
  --icon-button-size: 60px;
  --primary-button-height: 64px;
  --secondary-button-height: 60px;
  --genre-tile-height: 108px;
  --choice-button-height: 60px;
  --feedback-card-padding: 18px;
  --progress-segments-height: 8px;
  --gauge-bar-height: 14px;
  --stamp-card-height: 128px;
  --question-media-height: 160px;
  --choice-media-size: 44px;
  --keypad-key-w: 88px;
  --keypad-key-h: 72px;
  --pin-dots-size: 20px;
  --toggle-w: 56px;
  --toggle-h: 32px;
  --segmented-option-height: 60px;
}