/*====================================================================

 役割: テーマカラー定義、フォント定義、CSSリセットおよび基本要素スタイルの管理
 担当UI: アプリ全体のテーマ、共通要素、ベーススタイル
 関連HTML: <html>, <body>, <button>, <a>, :root

====================================================================*/

/*====================================================================

 Theme Color

 全体で使用するカラー

 後で DarkTheme を追加しやすいよう
 CSS変数で管理する。

====================================================================*/

:root{

    /* 背景 */

    --bg:#fff8ed;

    --surface:#ffffff;

    --surface-soft:#fffdf8;



    /* テーマカラー */

    --primary:#49b7ff;

    --primary-dark:#176f9f;

    --primary-light:#e7f7ff;



    /* ミント */

    --mint:#57d7b4;

    --mint-light:#eafbf5;



    /* オレンジ */

    --orange:#ff8e86;

    --orange-light:#fff0eb;



    /* 赤 */

    --red:#ff5c72;

    --red-light:#ffe8ec;



    /* テキスト */

    --navy:#173a61;

    --cream:#fff4d6;

    --coral:#ff8e86;

    --coral-dark:#a9364a;

    --text:#24364b;

    --sub:#66788b;



    /* ボーダー */

    --line:#dfe9ee;



    /* シャドウ */

    --shadow-sm:

        0 8px 24px rgba(23,58,97,.08);

    --shadow:

        0 16px 38px rgba(23,58,97,.12);

    --shadow-lg:

        0 24px 64px rgba(23,58,97,.18);



    /* Radius */

    --radius:20px;

    --radius-large:28px;



    /* Font */

    font-family:

        "Yu Gothic UI",

        "Hiragino Sans",

        "Noto Sans JP",

        sans-serif;

}





/*====================================================================

 Reset

====================================================================*/

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}



html,
body{

    width:100%;

    height:100%;

}



body{

    overflow:hidden;

    background:var(--bg);

    color:var(--text);

    -webkit-font-smoothing:antialiased;

    font-feature-settings:"palt" 1;

}



button{

    border:none;

    background:none;

    cursor:pointer;

    font:inherit;

}



button:focus-visible{

    outline:3px solid var(--navy);

    outline-offset:3px;

}



a{

    text-decoration:none;

    color:inherit;

}



/*====================================================

 Hover

====================================================*/

button{

    transition:

        transform .25s,

        box-shadow .25s;

}



button:hover{

    transform:translateY(-2px);

}

button:disabled{

    cursor:wait;

    opacity:.68;

    transform:none;

}
