@layer theme {
  :root {
    /* 大阪カラートークン（用途別セマンティックトークン。値はここに直接指定する。
       都市展開時はこのブロックの値を差し替えるだけで良い。
       --theme- prefix はイベントテーマ由来トークンの目印。共通CSS/他ページからは参照しない規約 */
    --theme-color-surface-primary: #62B0E3;                     /* 背景 */
    --theme-color-heading: var(--theme-color-surface-primary);  /* 中面ヘッダータイトルなど（カンプでは画像化されており現状未使用。将来テキスト化する場合の予備） */
    --theme-color-surface-text: #D2E7F6;                        /* 背景テキスト用の背景色 */
    --theme-color-button-bg: #F98656;                           /* ボタン */
    --theme-color-menu-border: var(--theme-color-button-bg);    /* メニューボーダー（ボタンと同色） */
    --theme-color-link: #F5A100;                                /* リンク */
    --theme-color-point: var(--theme-color-link);               /* ポイントカラー（リンクと同色） */
    --theme-color-subtitle: #0F8CCF;                            /* サブタイトル */
    --theme-color-box-bg: #F6F7DC;                              /* 概要BOX・サブテキスト背景色 */
    --theme-color-box-border: #4792BF;                          /* BOXボーダー */
    --theme-color-surface-secondary: #2e97fb;

    /* color-mix() 派生例（実際に使うインタラクション状態が固まったら調整） */
    --theme-color-surface-primary-hover: color-mix(in oklch, var(--theme-color-surface-primary) 85%, black);
    --theme-color-surface-primary-muted: color-mix(in oklch, var(--theme-color-surface-primary) 30%, white);
    --theme-color-button-bg-hover: color-mix(in oklch, var(--theme-color-button-bg) 85%, black);
    --theme-color-link-hover: color-mix(in oklch, var(--theme-color-link) 85%, black);

    /* トップページのヒーロータイトル SVG 塗り色。イベントページでも参照可 */
    --theme-top-brand-color: #fff;
  }
}