/**
 * みつかる共通スタイル
 * 全プラグインで共有されるCSS変数とスタイルを定義
 */

:root {
    /* フォント */
    --font-primary: "Noto Sans JP", sans-serif;
    --font-rounded: "M PLUS Rounded 1c", sans-serif;
    --font-outfit: "Outfit", sans-serif;

    /* メインカラー */
    --pointColor: #ff7830;
    --pointColor-hover: #e86a2b;
    --pointColor-light: #fff1e8;

    /* テキストカラー */
    --txtColor: #3c3c3c;
    --txtColor-light: #666;
    --txtColor-muted: #999;

    /* セカンダリカラー（ブルー系） */
    --secondaryColor: #2563eb;
    --secondaryColor-hover: #1d4ed8;
    --secondaryColor-light: #eff6ff;

    /* ボーダーカラー */
    --borderColor: #e5e7eb;
    --borderColor-dark: #d1d5db;

    /* 背景色 */
    --bgColor: #fff;
    --bgColor-light: #f9fafb;
    --bgColor-dark: #f3f4f6;

    /* 成功・エラー・警告 */
    --successColor: #10b981;
    --errorColor: #ef4444;
    --warningColor: #f59e0b;
    --infoColor: #3b82f6;

    /* 互換性のための旧変数名（既存コードで使用） */
    --mitsukaru-primary-color: var(--pointColor);
    --mitsukaru-primary-color-hover: var(--pointColor-hover);
    --mitsukaru-primary-color-light: var(--pointColor-light);
    --mitsukaru-text-color: var(--txtColor);
    --mitsukaru-text-color-light: var(--txtColor-light);
    --mitsukaru-text-color-muted: var(--txtColor-muted);
    --mitsukaru-secondary-color: var(--secondaryColor);
    --mitsukaru-secondary-color-hover: var(--secondaryColor-hover);
    --mitsukaru-secondary-color-light: var(--secondaryColor-light);
    --mitsukaru-border-color: var(--borderColor);
    --mitsukaru-border-color-dark: var(--borderColor-dark);
    --mitsukaru-bg-color: var(--bgColor);
    --mitsukaru-bg-color-light: var(--bgColor-light);
    --mitsukaru-bg-color-dark: var(--bgColor-dark);
    --mitsukaru-success-color: var(--successColor);
    --mitsukaru-error-color: var(--errorColor);
    --mitsukaru-warning-color: var(--warningColor);
    --mitsukaru-info-color: var(--infoColor);
}

/* ================================
   フォーム要素のフォント継承
   <input> / <select> / <textarea> / <button> は HTML 仕様上、
   親要素の font-family を継承しない（ブラウザのシステムフォントに戻る）。
   全要素を body 規定のフォント（Noto Sans JP）に揃えるため明示的に継承させる。
================================ */
input,
select,
textarea,
button {
    font-family: inherit;
}

/* ================================
   見出しフォント（テーマの使い分けに合わせる）
   - h1 / h2 は装飾的な M PLUS Rounded 1c
   - h3 / h4 以下は body の Noto Sans JP を継承（指定不要）
   個別ページで別フォントを使いたい場合はクラスセレクタで上書きすること。
================================ */
/* テーマの style.css に reset 由来の `h2 { font-family: inherit }`（詳細度 0,0,1）が
   あり後勝ちで負けるため、body スコープにして詳細度を 0,0,2 に上げる。 */
body h1,
body h2 {
    font-family: var(--font-rounded, "M PLUS Rounded 1c", sans-serif);
}


/* ================================
   セレクトボックス共通シェブロン
================================ */
/* テーマのグローバル select { appearance: none } でネイティブ矢印が消えるため、
   このクラスでシェブロンを自前描画する。SVG の定義はここ1箇所のみとする。
   右パディング（シェブロン分の余白）は利用側のレイアウトで確保すること。 */
.mitsukaru-select-chevron {
    background-image: url("data:image/svg+xml,%3Csvg width='14' height='9' viewBox='0 0 14 9' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L7 7.5L13 1.5' stroke='%233c3c3c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
    background-position: right 17px center;
    background-repeat: no-repeat;
    background-size: 14px 9px;
    -webkit-appearance: none;
    appearance: none;
}