/* =========================================
   Design Tokens (変数の定義)
========================================= */
:root {
    /* ----- Fonts ----- */
    --font-black: "Noto Sans JP-Black", Helvetica, sans-serif;
    /* --font-bold: "Noto Sans JP-Bold", Helvetica, sans-serif; */
    --font-bold: 'Noto Sans JP', sans-serif;
    --font-medium: "Noto Sans JP-Medium", Helvetica, sans-serif;

    /* ----- Main Colors ----- */
    --color-primary: #102238;
    /* メインテキストの濃紺 */
    --color-primary-light: #2f366c;
    /* FVキャッチコピー用 */
    --color-white: #ffffff;
    --color-black: #000000;

    /* ----- Background Colors ----- */
    --color-bg-light: #f1f7fb;
    /* 薄い青背景 */
    --color-bg-gray: #fafafa;
    /* Voiceセクション背景 */
    --color-bg-dark: #01072b;
    /* FVのベース背景 */
    --color-bg-darker: #0a1422;
    /* FV下のダークバー */
    --color-card-dark: #233345;
    /* Problemカード背景 */

    /* ----- Accent Colors ----- */
    --color-accent-green: #009710;
    --color-accent-yellow: #B49001;
    --color-accent-blue: #0278B5;
    --color-accent-pink: #C72AA2;
    --color-btn-yellow: #e6ff00;
    /* CTAボタン */

    /* ----- Gradients ----- */
    --grad-box: linear-gradient(65deg, rgba(71, 175, 217, 1) 18%, rgba(241, 91, 221, 1) 100%);
    --grad-text: linear-gradient(90deg, #FF3FEA 0%, #08ACFF 100%);
    --grad-overlay: linear-gradient(135deg, rgba(71, 175, 217, 0.9) 0%, rgba(241, 91, 221, 0.9) 100%);

    /* ----- Shadows ----- */
    --shadow-sm: 0px 12px 24px rgba(0, 0, 0, 0.2);
    --shadow-md: 8px 8px 20px rgba(0, 0, 0, 0.15);
    --shadow-lg: 20px 20px 32px rgba(0, 0, 0, 0.1);
    --shadow-btn: 0 8px 24px rgba(0, 0, 0, 0.2);
    --shadow-btn-hover: 0 12px 32px rgba(0, 0, 0, 0.3);
}