html {
  box-sizing: border-box;
  cursor: auto;
  font-size: 62.5%;
  height: 100%;
}

body {
  -webkit-font-smoothing: antialiased;
  font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, Arial, ヒラギノ角ゴ ProN W3, Hiragino Kaku Gothic ProN, メイリオ, Meiryo, sans-serif;

  color: #e1e4e6;
  font-size: 1.2em;
  height: 100%;
  line-height: 1;
  overflow: hidden;
}

body.is-mobile {
  overflow-x: hidden;
  overflow-y: scroll;
}

/* reset css */
*,
*::before,
*::after {
  box-sizing: inherit;
}

button,
input,
select,
textarea,
form {
  border: none;
  font-weight: inherit;
  outline: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
}

a {
  border: none;
  text-decoration: none;
}

dd {
  margin: 0;
}

/*
 * ==================================
 * 共通アニメーション
 * ==================================
 */

.common-hover {
  transition: all 200ms ease;
}

.common-hover:hover {
  opacity: 1;
}

.text-hover {
  transition: all 200ms ease;
}

.text-hover:hover {
  opacity: 0.8;
}

.common-transition,
.common-transition::before,
.common-transition::after {
  transition: all 200ms ease;
}

/*
 * ==================================
 * Common circle loader
 * ==================================
 */

/* 直径であるwidth, heightはソースコードで記述する */
.loader-circle {
  position: relative;
  display: inline-block;
  margin: 0 12.5% 100px;
  border: solid #fff;
  border-radius: 50%;

  animation: loader-circle-spin 0.75s infinite linear;
}

.loader-circle::before,
.loader-circle::after {
  display: none;
  position: absolute;
  content: '';
  width: inherit;
  height: inherit;
  border: inherit;
  border-radius: inherit;
}

/* loader-circleとセットでクラス名に付与する */
.loader-circle-one-more,
.loader-circle-one-more::before {
  display: inline-block;
  border-color: transparent;
  border-top-color: #fff;
}

.loader-circle-one-more::before {
  animation: loader-circle-spin 1.5s infinite ease;
}

@keyframes loader-circle-spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/*
 * ==================================
 * Common visiblity
 * ==================================
 */
.is-hidden.is-hidden {
  visibility: hidden;
}

.is-visible.is-visible {
  visibility: visible;
}

.is-display-none.is-display-none {
  display: none;
}

/*
 * ==================================
 * Common size
 * ==================================
 */

.width100.width100 {
  width: 100%;
}

.height100.height100 {
  height: 100%;
}

/*
 * ==================================
 * Common opacity
 * ==================================
 */

.opacity0.opacity0 {
  opacity: 0;
}

.opacity20.opacity20 {
  opacity: 0.2;
}

.opacity40.opacity40 {
  opacity: 0.4;
}

.opacity60.opacity60 {
  opacity: 0.6;
}

.opacity100.opacity100 {
  opacity: 1;
}

/*
 * ==================================
 * Common cursor
 * ==================================
 */

.cursor-pointer.cursor-pointer {
  cursor: pointer;
}

.cursor-none.cursor-none {
  cursor: none;
}

.pointer-event-auto.pointer-event-auto {
  pointer-events: auto;
}

.pointer-event-none.pointer-event-none {
  pointer-events: none;
}

/*
 * ==================================
 * Common rotate
 * ==================================
 */

.rotate90.rotate90 {
  transform: rotate(90deg);
}

.rotate180.rotate180 {
  transform: rotate(180deg);
}

.rotate270.rotate270 {
  transform: rotate(270deg);
}

/*
 * ==================================
 * Common form
 * ==================================
 */

.form-error.form-error {
  border: solid 1px #ff4c11;
}

/*
 * ==================================
 * Common Background color
 * ==================================
 */

.bg-black.bg-black {
  background-color: #000;
}

/*
 * ==================================
 * Common Text
 * ==================================
 */

.text-ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding: 1px 0;
}

/*
 * ==================================
 * Common Button
 * ==================================
 */

.button-disabled {
  cursor: default;
  pointer-events: none;
}

/*
 * ==================================
 * Common Others
 * ==================================
 */

/**
 * will-changeプロパティを使用して、ハードウェアアクセラレーターを有効にする
 */
.will-change-transform.will-change-transform {
  will-change: transform;
}

.flex-justify-content-flex-end.flex-justify-content-flex-end {
  justify-content: flex-end;
}

.align-items-center.align-items-center {
  align-items: center;
}

.display-flex.display-flex {
  display: flex;
}

.overflow-hidden.overflow-hidden {
  overflow: hidden;
}

/*
 * ==================================
 * Skin color set
 * ==================================
 */

/* skin black */
.skin-black .skin10 {
  /* background-color: rgba(35, 35, 35, 0.95); */
  background-color: #232323;
}

.skin-black .skin20 {
  /* background-color: rgba(50, 50, 50, 0.95); */
  background-color: #323232;
}

/* skin blue */
.skin-blue .skin10 {
  /* background-color: rgba(8, 35, 55, 0.95); */
  background-color: #082337;
}

.skin-blue .skin20 {
  /* background-color: rgba(25, 50, 69, 0.95); */
  background-color: #193245;
}

/* skin purple */
.skin-purple .skin10 {
  /* background-color: rgba(28, 26, 46, 0.95); */
  background-color: #1c1a2e;
}

.skin-purple .skin20 {
  /* background-color: rgba(44, 42, 60, 0.95); */
  background-color: #2c2a3c;
}

.or-reactdatepicker-wrapper {
  display: inherit;
}

/*
 * ==================================
 * reCAPTCHA enterprise
 * ==================================
 */
.grecaptcha-badge {
  visibility: hidden;
}

/*
 * ==================================
 * Chrome
 * - Chromeブラウザでのみ適用するスタイルを定義
 * ==================================
 */

/*
 * chrome ver 76.0
 * シアターモードから通常のプレイヤーに戻す際の表示崩れ対応。
 * https://github.com/openrec/openrec-tv/pull/1282
 */
.is-chrome .player-wrapper-resize {
  width: calc(100% - 1px);
}

/*
 * ==================================
 * Internet Explorer
 * - Internet Explorerブラウザでのみ適用するスタイルを定義
 * ==================================
 */

/*
 * ==================================
 * Dialog
 * ==================================
 */

.is-ie .dialog-controller {
  height: 100%;
}

/*
 * ==================================
 * capture embed
 * ==================================
 */

.is-capture-embed .header.header {
  display: none;
}

.is-capture-embed .page-wrapper {
  padding-top: 0;
}

/*
 * ==================================
 * Mobile Device
 * - URLに/m/が付与されている、モバイル専用のCommon CSS
 * ==================================
 */

/*
 Mobileデバイスの際に、一律noneにするセレクタ
 各コンポーネントにて、Mobileでの挙動がnoneのみは場合はこちらを使用する
 */
.is-mobile .display-none-when-mobile {
  display: none;
}

/*
 * ==================================
 * Small display size
 * - ディスプレイサイズ小の対応
 * ==================================
 */

/*
 ディスプレイサイズ小の際に、一律非表示にするセレクタ
 ※ 各コンポーネントにて、小サイズでの挙動が非表示のみは場合はこちらを使用する
 */
.is-small-display .display-none-when-small-display {
  display: none;
}

/*
 ディスプレイサイズ小の際に、一律表示にするセレクタ
 */
.is-small-display .display-block-when-small-display {
  display: block;
}

/*
 ディスプレイサイズ小の際に、一律Flexにするセレクタ
 */
.is-small-display .display-flex-when-small-display {
  display: flex;
}

/*
 * ==================================
 * League rank page
 * - SSR時のガタツキを減らすためにcssでスタイルを調整する
 * ==================================
 */

/* チャットポップアウト時のheaderのスタイル */
.is-league-rank-page .header.header {
  display: none;
}

.is-league-rank-page .page-wrapper {
  padding-top: 0;
}

/*
 * ==================================
 * Movie page for mobile device
 * - URLに/m/が付与されている、モバイルかつ再生ページ専用のCSS
 * ==================================
 */

/* モバイルページでは、チャット欄を非表示にする */
.is-mobile .movie-page-article {
  margin-right: 0;
}

/* モバイルページでは、チャット欄を非表示にする */
.is-mobile .movie-page-chat-aside {
  display: none;
}

/*
 * ==================================
 * Movie page player rotation
 * - プレイヤーが回転した際のサイズを調整する
 * ==================================
 */
.video-rotate90 .openrec-video {
  transform: rotate(90deg);
}

.video-rotate180 .openrec-video {
  transform: rotate(180deg);
}

.video-rotate270 .openrec-video {
  transform: rotate(270deg);
}

/* video要素が90度または270度に回転した際のvideoのstyle */
.video-rotate90 .openrec-video,
.video-rotate270 .openrec-video {
  height: calc(100% * 16 / 9);
  width: calc(100% / 16 * 9);
  margin-left: calc(50% - (100% / 16 * 9) / 2);
}

/*
 * SSR時のガタツキを減らすためにcssでchat popoutのスタイルを調整する
 *
 *
 *
 * ==================================
 * movie page チャットpopout
 * ==================================
 */

/* チャットポップアウト時のheaderのスタイル */
.is-movie-page-chat-popout .header.header {
  display: none;
}

.is-movie-page-chat-popout .movie-page-chat-aside.movie-page-chat-aside {
  top: 0;
  left: 0;
  height: 100vh;
}

/*
 * ==================================
 * movie page エクステンションポップアウト
 * ==================================
 */
.is-movie-page-extension-popout .header.header {
  display: none;
}

.is-movie-page-extension-popout .movie-page-chat-aside.movie-page-chat-aside {
  display: block;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
}

/*
 * ==================================
 * Small display size for movie page
 * - 再生ページ専用のディスプレイサイズ小の対応
 * ==================================
 */

/* ディスプレイサイズ小では、チャット欄を非表示にする */
.is-small-display .movie-page-article {
  margin-right: 0;
}

/* ディスプレイサイズ小では、チャット欄を非表示にする */
.is-small-display .movie-page-chat-aside {
  display: none;
}

/* ディスプレイサイズ小では、各種CSSを調整する */
.is-small-display .movie-meta-content-description-wrapper {
  margin-top: 0;
}

/* ディスプレイサイズ小でも、シアターモードのときにはチャット欄を表示する */
.is-small-display.is-movie-page-theater-mode .movie-page-chat-aside {
  display: block;
}

/* チャットポップアウトでは、チャットを表示する */
.is-movie-page-chat-popout .movie-page-chat-aside.movie-page-chat-aside {
  display: block;
}

/* ディスプレイサイズ小では、配信者通知を非表示にする */
.is-small-display:not(.is-movie-page-chat-popout) .movie-page-split-view {
  display: none;
}

/* 配信者通知ポップアウトでは、通知を表示する */
.is-movie-page-split-view-popout .movie-page-split-view.movie-page-split-view {
  display: block;
}

/*
 * ==================================
 * Movie page theater mode
 * - SSRではnormal mode固定のため、ガタツキを減らすためにcssでtheater modeのスタイルを調整する
 * ==================================
 */

/* commons */
.movie-page-theater-mode-transition {
  transition: all 500ms ease;
}

/* シアターモード時のheaderのスタイル */
.is-movie-page-theater-mode .header {
  transition: all 500ms ease;
}

/*
 * シアターモード時のheaderのスタイル
 * - スクロールされていた場合は、非表示にしない
 */
.is-movie-page-theater-mode.movie-page-user-inactive.is-movie-page-top .header {
  opacity: 0;
  pointer-events: none;
}

.is-movie-page-theater-mode.movie-page-user-inactive.is-movie-page-top .header.is-search-input-focus {
  opacity: 1;
  pointer-events: auto;
}

/* page */
.is-movie-page-theater-mode .page-wrapper {
  padding-top: 0;
}

/* player */
.is-movie-page-theater-mode .video-player-wrapper {
  width: 100%;
  height: 100vh;
  max-height: 100vh;
}

/* page article */
.is-movie-page-theater-mode .movie-page-article {
  position: relative;
  margin-right: 0;
  max-height: 100vh;
}

/* chat aside */
.is-movie-page-theater-mode .movie-page-chat-aside {
  background-image: none;
  position: absolute;
  top: 0;
  transition: 500ms ease;
  transition-property: top, height;
  height: 100vh;
}

/* chat aside */
.is-movie-page-theater-mode.movie-page-user-active .movie-page-chat-aside {
  position: absolute;
  top: 5.6rem;
  height: calc(100vh - 11rem);
}

/* chat aside */
.is-movie-page-theater-mode.is-movie-page-existed-chat-moderator .movie-page-chat-aside {
  top: 5.6rem;
  height: calc(100vh - 5.6rem);
}

/* chat aside */
.is-movie-page-theater-mode.is-movie-page-existed-chat-moderator.movie-page-user-active .movie-page-chat-aside {
  top: 11.2rem;
  height: calc(100vh - 16.6rem);
}

/* chat scrollbars none */
.is-movie-page-theater-mode .movie-page-chat-aside .infinity-scroll-list {
  -ms-overflow-style: none;
}

.is-movie-page-theater-mode .movie-page-chat-aside .infinity-scroll-list::-webkit-scrollbar {
  display: none;
}

/* input area */
.is-movie-page-theater-mode .chat-input-area {
  display: none;
}

/* chat rule */
.is-movie-page-theater-mode .chat-menu {
  display: none;
}

/* chat aside */
.is-movie-page-theater-mode .movie-page-chat-moderator {
  position: absolute;
  top: -5.6rem;
  width: 100%;
  transform: translateY(5.6rem);
  transition: 500ms ease;
  transition-property: top, height;
}

/* chat aside */
.is-movie-page-theater-mode.movie-page-user-active .movie-page-chat-moderator {
  position: absolute;
  top: 0;
  transform: translateY(5.6rem);
}

/* theater input area */
.theater-input-area.theater-input-area {
  display: none;
}

/* theater input area */
.is-movie-page-theater-mode .theater-input-area.theater-input-area {
  display: block;
}

.is-movie-page-theater-mode .theater-mode-enter-icon.theater-mode-enter-icon {
  display: none;
}

.is-movie-page-theater-mode .theater-mode-exit-icon.theater-mode-exit-icon {
  display: block;
}

.chat-icon-wrapper.chat-icon-wrapper {
  display: none;
}

.is-movie-page-theater-mode .chat-icon-wrapper.chat-icon-wrapper {
  display: block;
}

.is-movie-page-theater-mode .chat-icon {
  display: block;
}

.is-movie-page-theater-mode.movie-page-user-active .controlbar-wrapper {
  display: block;
  opacity: 1;
}

/* theater chat */
.is-movie-page-theater-mode .chat-cell-wrapper {
  color: #fff;
}

.is-movie-page-theater-mode .chat-cell {
  background: rgba(10, 4, 36, 0.5);
}

.is-movie-page-theater-mode .chat-content {
  color: #fff;
}

/* theater capture chat */
.is-movie-page-theater-mode .capture-chat {
  background: rgba(10, 4, 36, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.is-movie-page-theater-mode .capture-chat .capture-chat-message {
  color: rgba(255, 255, 255, 0.8);
  text-shadow: none;
}

.is-movie-page-theater-mode .capture-chat .capture-chat-title {
  color: #fff;
}

/*
  theater system chat
  チャットを配信画面に表示するために、ユーザーがcssで調整できるようにsystem-chat-cell-wrapperのクラスは残す
*/
.is-movie-page-theater-mode .system-chat-cell-wrapper {
  color: #e4e3e8;
  background: rgba(10, 4, 36, 0.5);
}

.is-movie-page-theater-mode .system-chat-cell-wrapper-base {
  color: #e4e3e8;
  background: rgba(10, 4, 36, 0.5);
}

.is-movie-page-theater-mode .system-chat-cell-wrapper-blue {
  color: #fff;
  background-color: rgba(60, 37, 191, 0.5);
}

.is-movie-page-theater-mode .system-chat-cell-wrapper-red {
  color: #fff;
  background-color: rgba(198, 8, 8, 0.5);
}

.is-movie-page-theater-mode .system-chat-cell-wrapper-white-strong {
  color: #000;
  background-color: rgba(255, 255, 255, 0.61);
}

.is-movie-page-theater-mode .system-chat-cell-content {
  color: #e4e3e8;
}

/* theater yell chat */
.is-movie-page-theater-mode .yell-label-content {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}

/*
 * ==================================
 * Firefox
 * - Firefoxブラウザでのみ適用するスタイルを定義
 * ==================================
 */

/* firefoxでは作られない擬似クラスを無効化しバグを回避
   PR: https://github.com/openrec/openrec-tv/pull/3735#issuecomment-883056785 */
.is-firefox input::before,
.is-firefox input::after,
.is-firefox select::before,
.is-firefox select::after {
  display: none !important;
}

/*
 * ==================================
 * Chat
 * ==================================
 */

.is-firefox .chat-content {
  display: inline-block;
}

.is-firefox.is-movie-page-theater-mode .infinity-scroll-list {
  width: calc(100% + 2rem);
}

.is-firefox.is-movie-page-theater-mode .chat-list-content {
  width: 36rem;
}

/*
 * ==================================
 * Internet Explorer
 * - Internet Explorerブラウザでのみ適用するスタイルを定義
 * ==================================
 */

/*
 * ==================================
 * Chat
 * ==================================
 */

.is-ie .chat-content {
  display: inline-block;
}

.is-ie .chat-cell {
  width: 100%;
}

/*
 * ==================================
 * Windows
 * - Windowsでのみ適用するスタイルを定義
 * ==================================
 */

.is-windows * {
  font-weight: normal !important;
}

/*
 * ==================================
 * スクロールバー
 * ==================================
 */

.is-windows *::-webkit-scrollbar {
  width: 0.9rem;
  height: 0.9rem;
}

.is-windows *::-webkit-scrollbar-thumb {
  border: solid 1px rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  background: rgba(0, 0, 0, 0.5);
}

.is-windows *::-webkit-scrollbar-corner {
  display: none;
}

/**
 * --or_theme_[theme-category](_[index])
 */
html[mode=dark] {
  /* FillButton */
  --or_theme_atoms-fillButton_default: var(--or_color_black-text_20);
  --or_theme_atoms-fillButton_primary: var(--or_color_bg-bottom_dark);
  --or_theme_atoms-fillButton_secondary: var(--or_color_white-text_0);
  --or_theme_atoms-fillButton_tertiary: var(--or_color_white-text_0);
  --or_theme_atoms-fillButton_muted: var(--or_color_text-strong_dark);
  --or_theme_atoms-fillButton_disabled: var(--or_color_text-placeholder_dark);
  --or_theme_atoms-fillButton_deregister: var(--or_color_white-text_0);
  --or_theme_atoms-fillButton_facebook: var(--or_color_white-text_0);
  --or_theme_atoms-fillButton_twitter: var(--or_color_white-text_0);
  --or_theme_atoms-fillButton_google: var(--or_color_black-text_20);
  --or_theme_atoms-fillButton_yahoo: var(--or_color_white-text_0);
  --or_theme_atoms-fillButton_like: var(--or_color_yellow_80);
  --or_theme_atoms-fillButton_capture: var(--or_color_red_60);
  --or_theme_atoms-fillButton_app: var(--or_color_accent_light);
  --or_theme_atoms-fillButton_danger: var(--or_color_white);
  --or_theme_atoms-fillButton-background_default: var(--or_color_white);
  --or_theme_atoms-fillButton-background_primary: var(--or_color_accent_dark);
  --or_theme_atoms-fillButton-background_secondary: var(--or_color_live_dark);
  --or_theme_atoms-fillButton-background_tertiary: var(--or_color_premium_dark);
  --or_theme_atoms-fillButton-background_muted: var(--or_color_alpha-2_dark);
  --or_theme_atoms-fillButton-background_disabled: var(--or_color_alpha-2_dark);
  --or_theme_atoms-fillButton-background_deregister: var(--or_color_alpha-white_10);
  --or_theme_atoms-fillButton-background_facebook: var(--facebook-blue);
  --or_theme_atoms-fillButton-background_x: var(--x-black);
  --or_theme_atoms-fillButton-background_google: var(--google-white);
  --or_theme_atoms-fillButton-background_yahoo: var(--yahoo-red);
  --or_theme_atoms-fillButton-background_like: var(--or_color_alpha-white_10);
  --or_theme_atoms-fillButton-background_capture: var(--or_color_light_10);
  --or_theme_atoms-fillButton-background_app: var(--or_color_white);
  --or_theme_atoms-fillButton-background_danger: var(--or_color_bg-error_dark);

  /* OutlineButton */
  --or_theme_atoms-outlineButton_default: var(--or_color_text-base_dark);
  --or_theme_atoms-outlineButton_primary: var(--or_color_accent_dark);
  --or_theme_atoms-outlineButton_secondary: var(--or_color_live_dark);
  --or_theme_atoms-outlineButton_tertiary: var(--or_color_text-premium_dark);
  --or_theme_atoms-outlineButton_muted: var(--or_color_light_60);
  --or_theme_atoms-outlineButton_disabled: var(--or_color_alpha-white_60);
  --or_theme_atoms-outlineButton_white: var(--or_color_white);
  --or_theme_atoms-outlineButton-border_default: var(--or_color_frame_dark);
  --or_theme_atoms-outlineButton-border_primary: var(--or_color_accent_dark);
  --or_theme_atoms-outlineButton-border_secondary: var(--or_color_live_dark);
  --or_theme_atoms-outlineButton-border_tertiary: var(--or_color_text-premium_dark);
  --or_theme_atoms-outlineButton-border_muted: var(--or_color_light_60);
  --or_theme_atoms-outlineButton-border_disabled: var(--or_color_alpha-white_60);
  --or_theme_atoms-outlineButton-border_white: var(--or_color_white);

  /* TextButton */
  --or_theme_atoms-textButton_default: var(--or_color_white-text_0);
  --or_theme_atoms-textButton_primary: var(---or_color_yellow_60);
  --or_theme_atoms-textButton_weakly: var(--or_color_white-text_20);

  /* TrimBar */
  --or_theme_atoms-trimBar: var(--or_color_yellow_60);

  /* FillLabel */
  --or_theme_atoms-label_default: '';
  --or_theme_atoms-label_primary: var(--or_color_black-text_20);
  --or_theme_atoms-label_secondary: var(--or_color_white-text_0);
  --or_theme_atoms-label_tertiary: var(--or_color_white-text_20);
  --or_theme_atoms-label_tertiaryDisabled: var(--or_color_alpha-white_60);
  --or_theme_atoms-label-background_default: var(--or_color_alpha-white_10);
  --or_theme_atoms-label-background_primary: var(--or_color_yellow_60);
  --or_theme_atoms-label-background_secondary: var(--or_color_red_60);
  --or_theme_atoms-label-background_tertiary: var(--or_color_premium_dark);
  --or_theme_atoms-label-background_tertiaryDisabled: var(--or_color_blue_40);

  /* ReactionLabel */
  --or_theme_atoms-reactionLabel: var(--or_color_white-text_0);

  /* TextLabel */
  --or_theme_atoms-textLabel_default: var(--or_color_white-text_0);
  --or_theme_atoms-textLabel_primary: var(--or_color_black-text_20);
  --or_theme_atoms-textLabel_secondary: var(--or_color_white-text_0);
  --or_theme_atoms-textLabel_tertiary: var(--or_color_white-text_0);
  --or_theme_atoms-textLabel_weakly: var(--or_color_black-text_20);
  --or_theme_atoms-textLabel-background_default: var(--or_color_alpha-black_40);
  --or_theme_atoms-textLabel-background_primary: var(--or_color_yellow_60);
  --or_theme_atoms-textLabel-background_secondary: var(--or_color_red_60);
  --or_theme_atoms-textLabel-background_tertiary: var(--or_color_premium_dark);
  --or_theme_atoms-textLabel-background_weakly: var(--or_color_alpha-white_80);

  /* TextList */
  --or_theme_atoms-textList_default: var(--or_color_text-base_dark);
  --or_theme_atoms-textList_movie: var(--or_color_text-strong_dark);
  --or_theme_atoms-textList_primary: var(--or_color_text-strong_dark);
  --or_theme_atoms-textList-background_default: var(--or_color_bg-top_dark);
  --or_theme_atoms-textList-background_movie: var(--or_color_alpha-black_80);
  --or_theme_atoms-textList-background_primary: var(--or_color_dark_60);

  /* Balloontip */
  --or_theme_atoms-balloontip-background_default: var(--or_color_bg-top_dark);
  --or_theme_atoms-balloontip-background_primary: var(--or_color_yellow_60);
  --or_theme_atoms-balloontip-background_secondary: var(--or_color_red_60);
  --or_theme_atoms-balloontip-background_tertiary: var(--or_color_blue_40);

  /* SystemMessage */
  --or_theme_atoms-systemMessage_default: var(--or_color_black-text_20);
  --or_theme_atoms-systemMessage_primary: var(--or_color_text-strong_light);
  --or_theme_atoms-systemMessage_secondary: var(--or_color_white-text_0);
  --or_theme_atoms-systemMessage_tertiary: var(--or_color_white-text_0);
  --or_theme_atoms-systemMessage-background_default: var(--or_color_alpha-white_80);
  --or_theme_atoms-systemMessage-background_primary: var(--or_color_accent_dark);
  --or_theme_atoms-systemMessage-background_secondary: var(--or_color_red_60);
  --or_theme_atoms-systemMessage-background_tertiary: var(--or_color_blue_40);
  --or_theme_atoms-systemMessage-background_blue_60: var(--or_color_blue_60);

  /* SystemChat */
  --or_theme_atoms-systemChat-color_base: var(--or_color_text-weak_dark);
  --or_theme_atoms-systemChat-background_base: var(--or_color_bg-base_dark);
  --or_theme_atoms-systemChat-color_red: #ffbebe;
  --or_theme_atoms-systemChat-background_red: rgba(240, 0, 0, 0.2);
  --or_theme_atoms-systemChat-color_blue: #bfb3ff;
  --or_theme_atoms-systemChat-background_blue: rgba(99, 79, 197, 0.2);
  --or_theme_atoms-systemChat-color_white-strong: #fff;
  --or_theme_atoms-systemChat-background_white-strong: #343145;

  /* Tooltip */
  --or_theme_atoms-tooltip_default: var(--or_color_white-text_20);
  --or_theme_atoms-tooltip_primary: var(--or_color_black-text_20);
  --or_theme_atoms-tooltip_secondary: var(--or_color_white-text_20);
  --or_theme_atoms-tooltip_tertiary: var(--or_color_white-text_20);
  --or_theme_atoms-tooltip-background_default: var(--or_color_alpha-black_80);
  --or_theme_atoms-tooltip-background_primary: var(--or_color_yellow_60);
  --or_theme_atoms-tooltip-background_secondary: var(--or_color_red_60);
  --or_theme_atoms-tooltip-background_tertiary: var(--or_color_blue_40);
}

/**
 * --or_theme_[theme-category](_[index])
 */
html {
  /* FillButton */
  --or_theme_atoms-fillButton_default: var(--or_color_black-text_20);
  --or_theme_atoms-fillButton_primary: var(--or_color_text-strong_dark);
  --or_theme_atoms-fillButton_secondary: var(--or_color_white-text_0);
  --or_theme_atoms-fillButton_tertiary: var(--or_color_white-text_0);
  --or_theme_atoms-fillButton_muted: var(--or_color_text-strong_light);
  --or_theme_atoms-fillButton_disabled: var(--or_color_text-placeholder_light);
  --or_theme_atoms-fillButton_deregister: var(--or_color_white-text_0);
  --or_theme_atoms-fillButton_facebook: var(--or_color_white-text_0);
  --or_theme_atoms-fillButton_twitter: var(--or_color_white-text_0);
  --or_theme_atoms-fillButton_google: var(--or_color_black-text_20);
  --or_theme_atoms-fillButton_yahoo: var(--or_color_white-text_0);
  --or_theme_atoms-fillButton_like: var(--or_color_yellow_80);
  --or_theme_atoms-fillButton_capture: var(--or_color_red_60);
  --or_theme_atoms-fillButton_app: var(--or_color_accent_light);
  --or_theme_atoms-fillButton_danger: var(--or_color_white);
  --or_theme_atoms-fillButton-background_default: var(--or_color_white);
  --or_theme_atoms-fillButton-background_primary: var(--or_color_accent_light);
  --or_theme_atoms-fillButton-background_secondary: var(--or_color_live_dark);
  --or_theme_atoms-fillButton-background_tertiary: var(--or_color_premium_light);
  --or_theme_atoms-fillButton-background_muted: var(--or_color_alpha-2_light);
  --or_theme_atoms-fillButton-background_disabled: var(--or_color_alpha-2_light);
  --or_theme_atoms-fillButton-background_deregister: var(--or_color_alpha-black_50);
  --or_theme_atoms-fillButton-background_facebook: var(--facebook-blue);
  --or_theme_atoms-fillButton-background_x: var(--x-black);
  --or_theme_atoms-fillButton-background_google: var(--google-white);
  --or_theme_atoms-fillButton-background_yahoo: var(--yahoo-red);
  --or_theme_atoms-fillButton-background_like: var(--or_color_alpha-white_10);
  --or_theme_atoms-fillButton-background_capture: var(--or_color_light_10);
  --or_theme_atoms-fillButton-background_app: var(--or_color_white);
  --or_theme_atoms-fillButton-background_danger: var(--or_color_bg-error_light);

  /* OutlineButton */
  --or_theme_atoms-outlineButton_default: var(--or_color_text-base_light);
  --or_theme_atoms-outlineButton_primary: var(--or_color_accent_light);
  --or_theme_atoms-outlineButton_secondary: var(--or_color_live_light);
  --or_theme_atoms-outlineButton_tertiary: var(--or_color_text-premium_light);
  --or_theme_atoms-outlineButton_muted: var(--or_color_light_60);
  --or_theme_atoms-outlineButton_disabled: var(--or_color_alpha-black_10);
  --or_theme_atoms-outlineButton_white: var(--or_color_white);
  --or_theme_atoms-outlineButton-border_default: var(--or_color_frame_light);
  --or_theme_atoms-outlineButton-border_primary: var(--or_color_accent_light);
  --or_theme_atoms-outlineButton-border_secondary: var(--or_color_live_light);
  --or_theme_atoms-outlineButton-border_tertiary: var(--or_color_text-premium_light);
  --or_theme_atoms-outlineButton-border_muted: var(--or_color_light_60);
  --or_theme_atoms-outlineButton-border_disabled: var(--or_color_alpha-black_10);
  --or_theme_atoms-outlineButton-border_white: var(--or_color_white);

  /* TextButton */
  --or_theme_atoms-textButton_default: var(--or_color_black-text_20);
  --or_theme_atoms-textButton_primary: var(---or_color_yellow_60);
  --or_theme_atoms-textButton_weakly: var(--or_color_black-text_20);

  /* TrimBar */
  --or_theme_atoms-trimBar: var(--or_color_yellow_80);

  /* FillLabel */
  --or_theme_atoms-label_default: '';
  --or_theme_atoms-label_primary: var(--or_color_black-text_20);
  --or_theme_atoms-label_secondary: var(--or_color_white-text_0);
  --or_theme_atoms-label_tertiary: var(--or_color_white-text_20);
  --or_theme_atoms-label_tertiaryDisabled: var(--or_color_alpha-white_60);
  --or_theme_atoms-label-background_default: var(--or_color_alpha-white_10);
  --or_theme_atoms-label-background_primary: var(--or_color_yellow_60);
  --or_theme_atoms-label-background_secondary: var(--or_color_red_60);
  --or_theme_atoms-label-background_tertiary: var(--or_color_premium_light);
  --or_theme_atoms-label-background_tertiaryDisabled: var(--or_color_blue_60);

  /* ReactionLabel */
  --or_theme_atoms-reactionLabel: var(--or_color_black-text_40);

  /* TextLabel */
  --or_theme_atoms-textLabel_default: var(--or_color_white-text_0);
  --or_theme_atoms-textLabel_primary: var(--or_color_white-text_0);
  --or_theme_atoms-textLabel_secondary: var(--or_color_white-text_0);
  --or_theme_atoms-textLabel_tertiary: var(--or_color_white-text_0);
  --or_theme_atoms-textLabel_weakly: var(--or_color_black-text_20);
  --or_theme_atoms-textLabel-background_default: var(--or_color_alpha-black_40);
  --or_theme_atoms-textLabel-background_primary: var(--or_color_yellow_80);
  --or_theme_atoms-textLabel-background_secondary: var(--or_color_red_60);
  --or_theme_atoms-textLabel-background_tertiary: var(--or_color_premium_light);
  --or_theme_atoms-textLabel-background_weakly: var(--or_color_alpha-white_80);

  /* TextList */
  --or_theme_atoms-textList_default: var(--or_color_text-base_light);
  --or_theme_atoms-textList_movie: var(--or_color_text-strong_dark);
  --or_theme_atoms-textList_primary: var(--or_color_text-strong_light);
  --or_theme_atoms-textList-background_default: var(--or_color_bg-top_light);
  --or_theme_atoms-textList-background_movie: var(--or_color_alpha-black_80);
  --or_theme_atoms-textList-background_primary: var(--or_color_light_30);

  /* Balloontip */
  --or_theme_atoms-balloontip-background_default: var(--or_color_bg-top_light);
  --or_theme_atoms-balloontip-background_primary: var(--or_color_yellow_80);
  --or_theme_atoms-balloontip-background_secondary: var(--or_color_red_60);
  --or_theme_atoms-balloontip-background_tertiary: var(--or_color_blue_60);

  /* SystemMessage */
  --or_theme_atoms-systemMessage_default: var(--or_color_black-text_20);
  --or_theme_atoms-systemMessage_primary: var(--or_color_text-strong_light);
  --or_theme_atoms-systemMessage_secondary: var(--or_color_white-text_0);
  --or_theme_atoms-systemMessage_tertiary: var(--or_color_white-text_0);
  --or_theme_atoms-systemMessage-background_default: var(--or_color_alpha-white_80);
  --or_theme_atoms-systemMessage-background_primary: var(--or_color_accent_light);
  --or_theme_atoms-systemMessage-background_secondary: var(--or_color_red_60);
  --or_theme_atoms-systemMessage-background_tertiary: var(--or_color_blue_60);
  --or_theme_atoms-systemMessage-background_blue_60: var(--or_color_blue_60);

  /* SystemChat */
  --or_theme_atoms-systemChat-color_base: var(--or_color_text-weak_light);
  --or_theme_atoms-systemChat-background_base: var(--or_color_bg-base_light);
  --or_theme_atoms-systemChat-color_red: #ff3636;
  --or_theme_atoms-systemChat-background_red: rgba(240, 0, 0, 0.05);
  --or_theme_atoms-systemChat-color_blue: #5436ff;
  --or_theme_atoms-systemChat-background_blue: rgba(216, 208, 255, 0.3);
  --or_theme_atoms-systemChat-color_white-strong: #57517a;
  --or_theme_atoms-systemChat-background_white-strong: #fff;

  /* Tooltip */
  --or_theme_atoms-tooltip_default: var(--or_color_white-text_20);
  --or_theme_atoms-tooltip_primary: var(--or_color_black-text_20);
  --or_theme_atoms-tooltip_secondary: var(--or_color_white-text_20);
  --or_theme_atoms-tooltip_tertiary: var(--or_color_white-text_20);
  --or_theme_atoms-tooltip-background_default: var(--or_color_alpha-black_80);
  --or_theme_atoms-tooltip-background_primary: var(--or_color_yellow_80);
  --or_theme_atoms-tooltip-background_secondary: var(--or_color_red_60);
  --or_theme_atoms-tooltip-background_tertiary: var(--or_color_blue_60);
}

/**
 * --or_theme_[theme-category](_[index])
 */
html[mode=dark] {
  --or_theme_captureEdit-controller-background: var(--or_color_dark_50);
}

/**
 * --or_theme_[theme-category](_[index])
 */
html {
  --or_theme_captureEdit-controller-background: var(--or_color_light_20);
}

/**
 * --or_theme_[theme-category](_[index])
 */
html[mode=dark] {
  --or_theme_capturePlay-chatCell-background: var(--or_color_alpha-white_10);
}

/**
 * --or_theme_[theme-category](_[index])
 */
html {
  --or_theme_capturePlay-chatCell-background: var(--or_color_white);
}

/**
 * --or_theme_[theme-category](_[index])
 */
html[mode=dark] {
  /* BlacklistSetting */
  --or_theme_molecules-chatSetting-input-background: var(--or_color_alpha-white_10);
  --or_theme_molecules-chatSetting-section: var(--or_color_white-text_20);

  /* InputArea */
  --or_theme_molecules-inputArea-background_default: var(--or_color_bg-base_dark);
  --or_theme_molecules-inputArea-background_chatModerator: var(--or_color_bg-base_dark);
  --or_theme_molecules-inputArea-background_yell: var(--or_color_bg-base_dark);
  --or_theme_molecules-inputArea-input-background_default: var(--or_color_bg-upper-2_dark);
  --or_theme_molecules-inputArea-input-background_chatModerator: var(--or_color_bg-upper-2_dark);
  --or_theme_molecules-inputArea-input-background_yell: var(--or_color_bg-upper-2_dark);
  --or_theme_molecules-inputArea-input-placeholder_default: var(--or_color_white-text_40);
  --or_theme_molecules-inputArea-input-placeholder_chatModerator: var(--or_color_white-text_40);
  --or_theme_molecules-inputArea-input-placeholder_yell: var(--or_color_white-text_40);
  --or_theme_molecules-inputArea-input-hover-placeholder_default: var(--or_color_white-text_20);
  --or_theme_molecules-inputArea-input-hover-placeholder_chatModerator: var(--or_color_white-text_20);
  --or_theme_molecules-inputArea-input-hover-placeholder_yell: var(--or_color_white-text_20);
  --or_theme_molecules-inputArea-input-focus-placeholder_default: var(--or_color_white-text_60);
  --or_theme_molecules-inputArea-input-focus-placeholder_chatModerator: var(--or_color_white-text_60);
  --or_theme_molecules-inputArea-input-focus-placeholder_yell: var(--or_color_white-text_60);
  --or_theme_molecules-inputArea-textCounter_default: var(--or_color_white-text_40);
  --or_theme_molecules-inputArea-textCounter_chatModerator: var(--or_color_white-text_40);
  --or_theme_molecules-inputArea-textCounter_yell: var(--or_color_white-text_40);
  --or_theme_molecules-inputArea-telop-border_default: var(--or_color_yellow_60);
  --or_theme_molecules-inputArea-telop-border_chatModerator: '';
  --or_theme_molecules-inputArea-telop-border_yell: '';

  /* Setting */
  --or_theme_molecules-chatSetting-section-title: var(--or_color_white-text_20);

  /* Dialog */
  --or_theme_molecules-dialog-input-background: var(--or_color_dark_60);

  /* StampDialog */
  --or_theme_molecules-stampDialog-border: var(--or_color_alpha-white_20);
}

/**
 * --or_theme_[theme-category](_[index])
 */
html {
  /* BlacklistSetting */
  --or_theme_molecules-chatSetting-input-background: var(--or_color_alpha-white_60);
  --or_theme_molecules-chatSetting-section: var(--or_color_black-text_40);

  /* InputArea */
  --or_theme_molecules-inputArea-background_default: var(--or_color_bg-base_light);
  --or_theme_molecules-inputArea-background_chatModerator: var(--or_color_bg-base_light);
  --or_theme_molecules-inputArea-background_yell: var(--or_color_bg-base_light);
  --or_theme_molecules-inputArea-input-background_default: var(--or_color_bg-upper-2_light);
  --or_theme_molecules-inputArea-input-background_chatModerator: var(--or_color_bg-upper-2_light);
  --or_theme_molecules-inputArea-input-background_yell: var(--or_color_bg-upper-2_light);
  --or_theme_molecules-inputArea-input-placeholder_default: var(--or_color_black-text_40);
  --or_theme_molecules-inputArea-input-placeholder_chatModerator: var(--or_color_black-text_40);
  --or_theme_molecules-inputArea-input-placeholder_yell: var(--or_color_black-text_40);
  --or_theme_molecules-inputArea-input-hover-placeholder_default: var(--or_color_black-text_20);
  --or_theme_molecules-inputArea-input-hover-placeholder_chatModerator: var(--or_color_black-text_20);
  --or_theme_molecules-inputArea-input-hover-placeholder_yell: var(---or_color_black-text_20);
  --or_theme_molecules-inputArea-input-focus-placeholder_default: var(--or_color_black-text_60);
  --or_theme_molecules-inputArea-input-focus-placeholder_chatModerator: var(--or_color_black-text_60);
  --or_theme_molecules-inputArea-input-focus-placeholder_yell: var(--or_color_black-text_60);
  --or_theme_molecules-inputArea-textCounter_default: var(--or_color_black-text_40);
  --or_theme_molecules-inputArea-textCounter_chatModerator: var(--or_color_black-text_40);
  --or_theme_molecules-inputArea-textCounter_yell: var(--or_color_black-text_40);
  --or_theme_molecules-inputArea-telop-border_default: var(--or_color_yellow_80);
  --or_theme_molecules-inputArea-telop-border_chatModerator: '';
  --or_theme_molecules-inputArea-telop-border_yell: '';

  /* Setting */
  --or_theme_molecules-chatSetting-section-title: var(--or_color_black-text_40);

  /* Dialog */
  --or_theme_molecules-dialog-input-background: var(--or_color_light_50);

  /* StampDialog */
  --or_theme_molecules-stampDialog-border: var(--or_color_alpha-black_40);
}

/**
 * --or_theme_[theme-category](_[index])
 */
html[mode=dark] {
  --or_theme_movie-movieToolbar-startDate: var(--or_color_yellow_60);
}

/**
 * --or_theme_[theme-category](_[index])
 */
html {
  --or_theme_movie-movieToolbar-startDate: var(--or_color_yellow_80);
}

/**
 * --or_theme_[theme-category](_[index])
 */
html[mode=dark] {
  /* Tooltip */
  --or_theme_organisms-tooltip_default: var(--or_color_text-base_dark);
  --or_theme_organisms-tooltip_primary: var(--or_color_yellow_60);
  --or_theme_organisms-tooltip_secondary: var(--or_color_red_60);
  --or_theme_organisms-tooltip_tertiary: var(--or_color_blue_40);
  --or_theme_organisms-tooltip-background_default: var(--or_color_alpha-black_80);
  --or_theme_organisms-tooltip-background_primary: var(--or_color_black-text_20);
  --or_theme_organisms-tooltip-background_secondary: var(--or_color_white-text_20);
  --or_theme_organisms-tooltip-background_tertiary: var(--or_color_white-text_20);

  /* ReactionBar */
  --or_theme_organisms-reactionBar-selfButton-hover-background: rgba(255, 162, 0, 0.3);
}

/**
 * --or_theme_[theme-category](_[index])
 */
html {
  /* Tooltip */
  --or_theme_organisms-tooltip_default: var(--or_color_text-base_dark);
  --or_theme_organisms-tooltip_primary: var(--or_color_yellow_80);
  --or_theme_organisms-tooltip_secondary: var(--or_color_red_60);
  --or_theme_organisms-tooltip_tertiary: var(--or_color_blue_60);
  --or_theme_organisms-tooltip-background_default: var(--or_color_alpha-black_80);
  --or_theme_organisms-tooltip-background_primary: var(--or_color_black-text_20);
  --or_theme_organisms-tooltip-background_secondary: var(--or_color_white-text_20);
  --or_theme_organisms-tooltip-background_tertiary: var(--or_color_white-text_20);

  /* ReactionBar */
  --or_theme_organisms-reactionBar-selfButton-hover-background: rgba(255, 131, 0, 0.3);
}

/**
 * --or_theme_[theme-category](_[index])
 */
html[mode=dark],
[data-scoped-mode='dark'] {
  /* background color */
  --or_theme_bg-bottom: var(--or_color_bg-bottom_dark);
  --or_theme_bg-base: var(--or_color_bg-base_dark);
  --or_theme_bg-upper-1: var(--or_color_bg-upper-1_dark);
  --or_theme_bg-upper-2: var(--or_color_bg-upper-2_dark);
  --or_theme_bg-top: var(--or_color_bg-top_dark);
  --or_theme_bg-disabled: var(--or_color_bg-disabled_dark);
  --or_theme_bg-success: var(--or_color_bg-success_dark);
  --or_theme_bg-warning: var(--or_color_bg-warning_dark);
  --or_theme_bg-error: var(--or_color_bg-error_dark);

  /* shadow color */
  --or_theme_bg-box-shadow: var(--or_color_alpha-black_30);

  /* text color */
  --or_theme_text-strong: var(--or_color_text-strong_dark);
  --or_theme_text-base: var(--or_color_text-base_dark);
  --or_theme_text-weak: var(--or_color_text-weak_dark);
  --or_theme_text-placeholder: var(--or_color_text-placeholder_dark);
  --or_theme_text-disabled: var(--or_color_text-disabled_dark);
  --or_theme_text-premium: var(--or_color_text-premium_dark);
  --or_theme_text-ppv: var(--or_color_ppv_dark);
  --or_theme_text-success: var(--or_color_text-success_dark);
  --or_theme_text-warning: var(--or_color_text-warning_dark);
  --or_theme_text-error: var(--or_color_text-error_dark);

  /* border color */
  --or_theme_border-warning: var(--or_color_border-warning_dark);
  --or_theme_border-error: var(--or_color_border-error_dark);

  /* inverted text color */
  --or_theme_text-strong_invert: var(--or_color_text-strong_light);
  --or_theme_text-base_invert: var(--or_color_text-base_light);
  --or_theme_text-weak_invert: var(--or_color_text-weak_light);
  --or_theme_text-placeholder_invert: var(--or_color_text-placeholder_light);
  --or_theme_text-disabled_invert: var(--or_color_text-disabled_light);
  --or_theme_text-premium_invert: var(--or_color_text-premium_light);

  /* semantics color */
  --or_theme_accent: var(--or_color_accent_dark);
  --or_theme_premium: var(--or_color_premium_dark);
  --or_theme_live: var(--or_color_live_dark);
  --or_theme_danger: var(--or_color_live_dark);
  --or_theme_ppv: var(--or_color_ppv_dark);

  /* other color */
  --or_theme_line: var(--or_color_line_dark);
  --or_theme_frame: var(--or_color_frame_dark);
  --or_theme_alpha-1: var(--or_color_alpha-1_dark);
  --or_theme_alpha-2: var(--or_color_alpha-2_dark);
  --or_theme_highlight: var(--or_color_highlight_dark);
  --or_theme_frame-gold-weak: var(--or_color_frame-gold-weak_dark);
  --or_theme_frame-gold-middle: var(--or_color_frame-gold-middle_dark);
  --or_theme_frame-gold-strong: var(--or_color_frame-gold-strong_dark);
  --or_theme_fill-live-half: var(--or_color_fill-live-half_dark);

  /* old */

  /* base color */
  --or_theme_base_20: var(--or_color_dark_20);
  --or_theme_base_30: var(--or_color_dark_30);
  --or_theme_base_40: var(--or_color_dark_40);
  --or_theme_base_50: var(--or_color_dark_50);
  --or_theme_base_60: var(--or_color_dark_60);

  /* content color */
  --or_theme_content_20: var(--or_color_light_20);
  --or_theme_content_30: var(--or_color_light_30);
  --or_theme_content_40: var(--or_color_light_40);
  --or_theme_content_50: var(--or_color_light_50);
  --or_theme_content_60: var(--or_color_light_60);

  /* alpha base color */
  --or_theme_alpha-base_10: var(--or_color_alpha-black_10);
  --or_theme_alpha-base_20: var(--or_color_alpha-black_20);
  --or_theme_alpha-base_60: var(--or_color_alpha-black_60);
  --or_theme_alpha-base_80: var(--or_color_alpha-black_80);

  /* alpha content color */
  --or_theme_alpha-content-10: var(--or_color_alpha-white_10);
  --or_theme_alpha-content-20: var(--or_color_alpha-white_20);
  --or_theme_alpha-content-60: var(--or_color_alpha-white_60);

  /* text color */
  --or_theme_text_20: var(--or_color_white-text_20);
  --or_theme_text_40: var(--or_color_white-text_40);
  --or_theme_text_60: var(--or_color_white-text_60);

  /* other color */
  --or_theme_ruled-line: var(--or_color_dark_50);
  --or_theme_tag-badge-background: var(--or_color_dark_50);
  --or_theme_toast-background: var(--or_color_dark_50);
  --or_theme_cell-background: var(--or_color_dark_50);
  --or_theme_chat-cell-font: var(--or_color_white);
  --or_theme_chat-cell-background: var(--or_color_alpha-black_20);
  --or_theme_bordered-chat-cell-font-primary: var(--or_color_black-text_20);
  --or_theme_bordered-chat-cell-font-secondary: var(--or_color_black-text_40);
  --or_theme_bordered-chat-cell-border: var(--or_color_alpha-black_40);
  --or_theme_bordered-chat-cell-background: var(--or_color_alpha-white_80);
  --or_theme_setting-chat-cell-font: var(--or_color_black-text_20);
  --or_theme_setting-chat-cell-border: var(--or_color_alpha-black_20);
  --or_theme_setting-chat-cell-background: var(--or_color_alpha-yellow_80);
  --or_theme_dialog-background: var(--or_color_dark_50);
  --or_theme_dialog-scrim-background: rgba(0, 0, 0, 0.3);
  --or_theme_select-option-overlay-background: var(--or_color_alpha-white_10);
  --or_theme_switch-thumb-shadow: var(--or_color_black-text-shadow);
  --or_theme_switch-background: var(--or_color_dark_60);
  --or_theme_switch-background_checked: var(--or_color_yellow_60);
  --or_theme_text-field-background: var(--or_color_alpha-white_10);
  --or_theme_global-navigation-background: var(--or_color_dark_40);
  --or_theme_icon-fill: var(--or_color_dark_60);

  /* rank color */
  --or_theme_rank-first: var(--or_color_red_60);
  --or_theme_rank-second: var(--or_color_yellow_80);
  --or_theme_rank-third: var(--or_color_yellow_60);
  --or_theme_rank-other: var(--or_color_light_60);

  /* grandient color */
  --or_theme_gradient-black: linear-gradient(0deg, var(--or_color_gradient-black_60), var(--or_color_gradient-black_0));
}

/* stylelint-disable comment-empty-line-before */
/* stylelint-disable custom-property-pattern */

/**
 * --or_color_[color-category](_[index])
 */
html {
  /* background color (dark mode) */
  --or_color_bg-bottom_dark: var(--mf_color_black);
  --or_color_bg-base_dark: var(--mf_color_gray-100);
  --or_color_bg-upper-1_dark: var(--mf_color_gray-200);
  --or_color_bg-upper-2_dark: var(--mf_color_gray-200);
  --or_color_bg-top_dark: var(--mf_color_gray-300);
  --or_color_bg-disabled_dark: var(--mf_color_black-alpha-800);
  --or_color_bg-success_dark: var(--mf_color_green-500);
  --or_color_bg-warning_dark: var(--mf_color_yellow-500);
  --or_color_bg-error_dark: var(--mf_color_red-500);

  /* background color (light mode) */
  --or_color_bg-bottom_light: var(--mf_color_gray-900);
  --or_color_bg-base_light: var(--mf_color_white);
  --or_color_bg-upper-1_light: var(--mf_color_gray-950);
  --or_color_bg-upper-2_light: var(--mf_color_gray-950);
  --or_color_bg-top_light: var(--mf_color_white);
  --or_color_bg-disabled_light: var(--mf_color_white-alpha-850);
  --or_color_bg-success_light: var(--mf_color_green-700);
  --or_color_bg-warning_light: var(--mf_color_yellow-700);
  --or_color_bg-error_light: var(--mf_color_red-600);

  /* text color (dark mode) */
  --or_color_text-strong_dark: var(--mf_color_white);
  --or_color_text-base_dark: var(--mf_color_gray-900);
  --or_color_text-weak_dark: var(--mf_color_gray-700);
  --or_color_text-placeholder_dark: var(--mf_color_white-alpha-400);
  --or_color_text-disabled_dark: var(--mf_color_white-alpha-300);
  --or_color_text-premium_dark: var(--mf_color_pink-400);
  --or_color_text-success_dark: var(--mf_color_green-500);
  --or_color_text-warning_dark: var(--mf_color_yellow-500);
  --or_color_text-error_dark: var(--mf_color_red-300);

  /* text color (light mode) */
  --or_color_text-strong_light: var(--mf_color_black);
  --or_color_text-base_light: var(--mf_color_gray-150);
  --or_color_text-weak_light: var(--mf_color_gray-300);
  --or_color_text-placeholder_light: var(--mf_color_black-alpha-400);
  --or_color_text-disabled_light: var(--mf_color_black-alpha-400);
  --or_color_text-premium_light: var(--mf_color_pink-500);
  --or_color_text-success_light: var(--mf_color_green-700);
  --or_color_text-warning_light: var(--mf_color_yellow-700);
  --or_color_text-error_light: var(--mf_color_red-600);

  /* border color (dark mode) */
  --or_color_border-warning_dark: var(--mf_color_yellow-500);
  --or_color_border-error_dark: var(--mf_color_red-500);

  /* border color (light mode) */
  --or_color_border-warning_light: var(--mf_color_yellow-700);
  --or_color_border-error_light: var(--mf_color_red-700);

  /* semantics color (dark mode) */
  --or_color_accent_dark: var(--mf_color_pink-400);
  /* @deprecated Premium は Primary に統合 */
  --or_color_premium_dark: var(--mf_color_pink-400);
  --or_color_live_dark: var(--mf_color_red-500);
  /* @deprecated accentに統合 */
  --or_color_ppv_dark: var(--mf_color_pink-400);

  /* semantics color (light mode) */
  --or_color_accent_light: var(--mf_color_pink-400);
  /* @deprecated Premium は Primary に統合 */
  --or_color_premium_light: var(--mf_color_pink-400);
  --or_color_live_light: var(--mf_color_red-500);
  /* @deprecated accentに統合 */
  --or_color_ppv_light: var(--mf_color_pink-400);

  /* other color (dark mode) */
  --or_color_line_dark: var(--mf_color_white-alpha-150);
  --or_color_frame_dark: var(--mf_color_white-alpha-300);
  --or_color_alpha-1_dark: var(--mf_color_white-alpha-100);
  --or_color_alpha-2_dark: var(--mf_color_white-alpha-150);
  --or_color_highlight_dark: rgba(173 144 0 / 20%);
  --or_color_frame-gold-weak_dark: rgba(161 136 71 / 25%);
  --or_color_frame-gold-middle_dark: rgba(161 136 71 / 50%);
  --or_color_frame-gold-strong_dark: rgb(161 136 71);

  /* other color (light mode) */
  --or_color_line_light: var(--mf_color_black-alpha-100);
  --or_color_frame_light: var(--mf_color_black-alpha-200);
  --or_color_alpha-1_light: var(--mf_color_black-alpha-50);
  --or_color_alpha-2_light: var(--mf_color_black-alpha-100);
  --or_color_highlight_light: #fff9d3;
  --or_color_frame-gold-weak_light: rgba(219 182 83 / 25%);
  --or_color_frame-gold-middle_light: rgba(219 182 83 / 50%);
  --or_color_frame-gold-strong_light: rgb(219 182 83);

  /* special color */
  --or_color_fill-live-half_light: var(--mf_color_red-300);
  --or_color_fill-live-half_dark: var(--mf_color_red-300);

  /* fixed color */
  --or_color_black: var(--mf_color_black);
  --or_color_white: var(--mf_color_white);

  /*
  以下、古い色定義
  利用が非推奨のため、mellow-fanの色定義には最低限のみ変更する
  */

  /* black */
  --or_color_dark_20: var(--or_color_bg-bottom_dark);
  --or_color_dark_30: var(--or_color_bg-base_dark);
  --or_color_dark_40: var(--or_color_bg-upper-1_dark);
  --or_color_dark_50: var(--or_color_line_dark);
  --or_color_dark_60: var(--or_color_text-weak_dark);

  /* white */
  --or_color_light_10: var(--or_color_bg-upper-2_light);
  --or_color_light_20: var(--or_color_bg-bottom_light);
  --or_color_light_30: var(--or_color_bg-base_light);
  --or_color_light_40: var(--or_color_bg-upper-1_light);
  --or_color_light_50: var(--or_color_line_light);
  --or_color_light_60: var(--or_color_text-weak_light);

  /* yellow */
  --or_color_yellow_60: var(--or_color_accent_dark);
  --or_color_yellow_80: var(--or_color_accent_light);

  /* red */
  --or_color_red_60: var(--or_color_live_dark, --or_color_live_light);

  /* blue */
  --or_color_blue_40: var(--or_color_premium_dark);
  --or_color_blue_60: var(--or_color_premium_light);

  /* white text */
  --or_color_white-text_0: var(--or_color_text-strong_dark);
  --or_color_white-text_20: var(--or_color_text-base_dark);
  --or_color_white-text_40: var(--or_color_text-weak_dark);
  --or_color_white-text_60: var(--or_color_text-placeholder_dark);

  /* black text */
  --or_color_black-text_20: var(--or_color_text-strong_light);
  --or_color_black-text_40: var(--or_color_text-base_light);
  --or_color_black-text_60: var(--or_color_text-weak_light);

  /* gradient black */
  --or_color_gradient-black_0: var(--mf_color_black-alpha-0);
  --or_color_gradient-black_40: var(--mf_color_black-alpha-400);
  --or_color_gradient-black_60: var(--mf_color_black-alpha-600);

  /* alpha black */
  --or_color_alpha-black_10: var(--mf_color_black-alpha-100);
  --or_color_alpha-black_20: var(--mf_color_black-alpha-200);
  --or_color_alpha-black_30: var(--mf_color_black-alpha-300);
  --or_color_alpha-black_40: var(--mf_color_black-alpha-400);
  --or_color_alpha-black_50: var(--mf_color_black-alpha-500);
  --or_color_alpha-black_60: var(--mf_color_black-alpha-600);
  --or_color_alpha-black_80: var(--mf_color_black-alpha-800);

  /* alpha white */
  --or_color_alpha-white_10: var(--mf_color_white-alpha-100);
  --or_color_alpha-white_20: var(--mf_color_white-alpha-150);
  --or_color_alpha-white_40: var(--mf_color_white-alpha-400);
  --or_color_alpha-white_60: rgba(255 255 255 / 60%);
  --or_color_alpha-white_80: var(--mf_color_white-alpha-850);

  /* shadow */
  --or_color_black-text-shadow: var(--mf_color_black-alpha-500);

  /* social */
  --facebook-blue: var(--mf_social_facebook-blue);
  --facebook-white: var(--mf_social_facebook-white);
  --x-black: var(--mf_social_x-black);
  --x-white: var(--mf_social_x-white);
  --google-gray: var(--mf_social_google-gray);
  --google-black: var(--mf_social_google-black);
  --yahoo-gray: var(--mf_social_yahoo-gray);
  --yahoo-red: var(--mf_social_yahoo-red);
  --apple-black: var(--mf_social_apple-black);
}

/**
 * --or_theme_[theme-category](_[index])
 */
html,
[data-scoped-mode='light'] {
  /* background color */
  --or_theme_bg-bottom: var(--or_color_bg-bottom_light);
  --or_theme_bg-base: var(--or_color_bg-base_light);
  --or_theme_bg-upper-1: var(--or_color_bg-upper-1_light);
  --or_theme_bg-upper-2: var(--or_color_bg-upper-2_light);
  --or_theme_bg-top: var(--or_color_bg-top_light);
  --or_theme_bg-disabled: var(--or_color_bg-disabled_light);
  --or_theme_bg-success: var(--or_color_bg-success_light);
  --or_theme_bg-warning: var(--or_color_bg-warning_light);
  --or_theme_bg-error: var(--or_color_bg-error_light);

  /* shadow color */
  --or_theme_bg-box-shadow: var(--or_color_alpha-black_20);

  /* text color */
  --or_theme_text-strong: var(--or_color_text-strong_light);
  --or_theme_text-base: var(--or_color_text-base_light);
  --or_theme_text-weak: var(--or_color_text-weak_light);
  --or_theme_text-placeholder: var(--or_color_text-placeholder_light);
  --or_theme_text-disabled: var(--or_color_text-disabled_light);
  --or_theme_text-premium: var(--or_color_text-premium_light);
  --or_theme_text-ppv: var(--or_color_ppv_light);
  --or_theme_text-success: var(--or_color_text-success_light);
  --or_theme_text-warning: var(--or_color_text-warning_light);
  --or_theme_text-error: var(--or_color_text-error_light);

  /* border color */
  --or_theme_border-warning: var(--or_color_border-warning_light);
  --or_theme_border-error: var(--or_color_border-error_light);

  /* inverted text color */
  --or_theme_text-strong_invert: var(--or_color_text-strong_dark);
  --or_theme_text-base_invert: var(--or_color_text-base_dark);
  --or_theme_text-weak_invert: var(--or_color_text-weak_dark);
  --or_theme_text-placeholder_invert: var(--or_color_text-placeholder_dark);
  --or_theme_text-disabled_invert: var(--or_color_text-disabled_dark);
  --or_theme_text-premium_invert: var(--or_color_text-premium_dark);

  /* semantics color */
  --or_theme_accent: var(--or_color_accent_light);
  --or_theme_premium: var(--or_color_premium_light);
  --or_theme_live: var(--or_color_live_light);
  --or_theme_danger: var(--or_color_live_light);
  --or_theme_ppv: var(--or_color_ppv_light);

  /* other color */
  --or_theme_line: var(--or_color_line_light);
  --or_theme_frame: var(--or_color_frame_light);
  --or_theme_alpha-1: var(--or_color_alpha-1_light);
  --or_theme_alpha-2: var(--or_color_alpha-2_light);
  --or_theme_highlight: var(--or_color_highlight_light);
  --or_theme_frame-gold-weak: var(--or_color_frame-gold-weak_light);
  --or_theme_frame-gold-middle: var(--or_color_frame-gold-middle_light);
  --or_theme_frame-gold-strong: var(--or_color_frame-gold-strong_light);
  --or_theme_fill-live-half: var(--or_color_fill-live-half_light);

  /* old */

  /* base color */
  --or_theme_base_20: var(--or_color_light_20);
  --or_theme_base_30: var(--or_color_light_30);
  --or_theme_base_40: var(--or_color_light_40);
  --or_theme_base_50: var(--or_color_light_50);
  --or_theme_base_60: var(--or_color_light_60);

  /* content color */
  --or_theme_content_20: var(--or_color_dark_20);
  --or_theme_content_30: var(--or_color_dark_30);
  --or_theme_content_40: var(--or_color_dark_40);
  --or_theme_content_50: var(--or_color_dark_50);
  --or_theme_content_60: var(--or_color_dark_60);

  /* alpha base color */
  --or_theme_alpha-base_10: var(--or_color_alpha-white_10);
  --or_theme_alpha-base_20: var(--or_color_alpha-white_20);
  --or_theme_alpha-base_60: var(--or_color_alpha-white_60);
  --or_theme_alpha-base_80: var(--or_color_alpha-white_80);

  /* alpha content color */
  --or_theme_alpha-content-10: var(--or_color_alpha-black_10);
  --or_theme_alpha-content-20: var(--or_color_alpha-black_20);
  --or_theme_alpha-content-60: var(--or_color_alpha-black_60);

  /* text color */
  --or_theme_text_20: var(--or_color_black-text_20);
  --or_theme_text_40: var(--or_color_black-text_40);
  --or_theme_text_60: var(--or_color_black-text_60);

  /* other color */
  --or_theme_ruled-line: var(--or_color_light_50);
  --or_theme_tag-badge-background: var(--or_color_light_10);
  --or_theme_toast-background: var(--or_color_light_10);
  --or_theme_cell-background: var(--or_color_light_10);
  --or_theme_chat-cell-font: var(--or_color_white);
  --or_theme_chat-cell-background: var(--or_color_alpha-black_20);
  --or_theme_bordered-chat-cell-font-primary: var(--or_color_black-text_20);
  --or_theme_bordered-chat-cell-font-secondary: var(--or_color_black-text_40);
  --or_theme_bordered-chat-cell-border: var(--or_color_alpha-black_40);
  --or_theme_bordered-chat-cell-background: var(--or_color_alpha-white_80);
  --or_theme_setting-chat-cell-font: var(--or_color_black-text_20);
  --or_theme_setting-chat-cell-border: var(--or_color_alpha-black_20);
  --or_theme_setting-chat-cell-background: var(--or_color_alpha-yellow_80);
  --or_theme_dialog-background: var(--or_color_light_10);
  --or_theme_dialog-scrim-background: rgba(0, 0, 0, 0.3);
  --or_theme_select-option-overlay-background: var(--or_color_alpha-black_10);
  --or_theme_switch-thumb-shadow: var(--or_color_black-text-shadow);
  --or_theme_switch-background: var(--or_color_light_60);
  --or_theme_switch-background_checked: var(--or_color_yellow_60);
  --or_theme_text-field-background: var(--or_color_alpha-white_60);
  --or_theme_global-navigation-background: var(--or_color_light_40);
  --or_theme_icon-fill: var(--or_color_light_60);

  /* rank color */
  --or_theme_rank-first: var(--or_color_red_60);
  --or_theme_rank-second: var(--or_color_yellow_80);
  --or_theme_rank-third: var(--or_color_yellow_60);
  --or_theme_rank-other: var(--or_color_light_60);

  /* grandient color */
  --or_theme_gradient-black: linear-gradient(0deg, var(--or_color_gradient-black_60), var(--or_color_gradient-black_0));
}

/* stylelint-disable comment-empty-line-before */
/* stylelint-disable custom-property-pattern */

/**
 * Design System: mellow-fan ColorTokens v5 — Semantic / Dark
 *
 * セレクタは既存 static/@8/styles/theme/dark.css と同様の規約。
 */
html[mode='dark'],
[data-scoped-mode='dark'] {
  /* Background */
  --mf_surface_bottom: var(--mf_color_black);
  --mf_surface_base: var(--mf_color_gray-100);
  --mf_surface_upper: var(--mf_color_gray-200);
  --mf_surface_top: var(--mf_color_gray-300);
  --mf_surface_strong: var(--mf_color_gray-950);
  --mf_surface_alpha-1: var(--mf_color_white-alpha-100);
  --mf_surface_alpha-2: var(--mf_color_white-alpha-150);
  --mf_surface_disabled: var(--mf_color_black-alpha-800);
  --mf_surface_primary: var(--mf_color_pink-400);
  --mf_surface_primary-alpha: var(--mf_color_pink-alpha-20);
  --mf_surface_live: var(--mf_color_red-500);
  --mf_surface_warning: var(--mf_color_yellow-500);
  --mf_surface_error: var(--mf_color_red-500);
  --mf_surface_success: var(--mf_color_green-500);
  --mf_surface_error-alpha: var(--mf_color_red-alpha-20);

  /* Text */
  --mf_text_base: var(--mf_color_gray-900);
  --mf_text_weak: var(--mf_color_gray-700);
  --mf_text_strong: var(--mf_color_white);
  --mf_text_strong-invert: var(--mf_color_gray-150);
  --mf_text_placeholder: var(--mf_color_white-alpha-400);
  --mf_text_disabled: var(--mf_color_white-alpha-300);
  --mf_text_primary: var(--mf_color_pink-400);
  --mf_text_live: var(--mf_color_red-400);
  --mf_text_link: var(--mf_color_blue-300);
  --mf_text_error: var(--mf_color_red-300);
  --mf_text_warning: var(--mf_color_yellow-500);
  --mf_text_success: var(--mf_color_green-500);
  --mf_text_black: var(--mf_color_black);
  --mf_text_white: var(--mf_color_white);

  /* Border */
  --mf_border_base: var(--mf_color_white-alpha-300);
  --mf_border_weak: var(--mf_color_white-alpha-150);
  --mf_border_strong: var(--mf_color_white);
  --mf_border_primary: var(--mf_color_pink-400);
  --mf_border_error: var(--mf_color_red-500);
  --mf_border_success: var(--mf_color_green-500);
  --mf_border_warning: var(--mf_color_yellow-500);

  /* Gradient */
  --mf_gradient_black-0: var(--mf_color_black-alpha-0);
  --mf_gradient_black-100: var(--mf_color_black-alpha-600);
  --mf_gradient_primary: linear-gradient(98deg, #4375EA 0%, #4878EB 3%, #AD3AEC 50%, #EC4C8E 97%, #EB478B 100%);

  /* Shadow */
  --mf_shadow_weak: 0px 2px 10px rgb(23 27 28 / 30%);
  --mf_shadow_strong: 0px 2px 16px rgb(23 27 28 / 40%);
}

/* stylelint-disable comment-empty-line-before */
/* stylelint-disable custom-property-pattern */

/**
 * Design System: mellow-fan ColorTokens v5 — Semantic / Light
 *
 * セレクタは既存 static/@8/styles/theme/light.css と同様の規約。
 */
html,
[data-scoped-mode='light'] {
  /* Background */
  --mf_surface_bottom: var(--mf_color_gray-900);
  --mf_surface_base: var(--mf_color_white);
  --mf_surface_upper: var(--mf_color_gray-950);
  --mf_surface_top: var(--mf_color_white);
  --mf_surface_strong: var(--mf_color_gray-200);
  --mf_surface_alpha-1: var(--mf_color_black-alpha-50);
  --mf_surface_alpha-2: var(--mf_color_black-alpha-100);
  --mf_surface_disabled: var(--mf_color_white-alpha-850);
  --mf_surface_primary: var(--mf_color_pink-400);
  --mf_surface_primary-alpha: var(--mf_color_pink-alpha-5);
  --mf_surface_live: var(--mf_color_red-500);
  --mf_surface_warning: var(--mf_color_yellow-700);
  --mf_surface_error: var(--mf_color_red-600);
  --mf_surface_success: var(--mf_color_green-700);
  --mf_surface_error-alpha: var(--mf_color_red-alpha-5);

  /* Text */
  --mf_text_base: var(--mf_color_gray-150);
  --mf_text_weak: var(--mf_color_gray-300);
  --mf_text_strong: var(--mf_color_black);
  --mf_text_strong-invert: var(--mf_color_white);
  --mf_text_placeholder: var(--mf_color_black-alpha-400);
  --mf_text_disabled: var(--mf_color_black-alpha-400);
  --mf_text_primary: var(--mf_color_pink-500);
  --mf_text_live: var(--mf_color_red-500);
  --mf_text_link: var(--mf_color_blue-500);
  --mf_text_error: var(--mf_color_red-600);
  --mf_text_warning: var(--mf_color_yellow-700);
  --mf_text_success: var(--mf_color_green-700);
  --mf_text_black: var(--mf_color_black);
  --mf_text_white: var(--mf_color_white);

  /* Border */
  --mf_border_base: var(--mf_color_black-alpha-200);
  --mf_border_weak: var(--mf_color_black-alpha-100);
  --mf_border_strong: var(--mf_color_gray-100);
  --mf_border_primary: var(--mf_color_pink-500);
  --mf_border_error: var(--mf_color_red-700);
  --mf_border_success: var(--mf_color_green-700);
  --mf_border_warning: var(--mf_color_yellow-700);

  /* Gradient */
  --mf_gradient_black-0: var(--mf_color_black-alpha-0);
  --mf_gradient_black-100: var(--mf_color_black-alpha-600);
  --mf_gradient_primary: linear-gradient(98deg, #4375EA 0%, #4878EB 3%, #AD3AEC 50%, #EC4C8E 97%, #EB478B 100%);

  /* Shadow */
  --mf_shadow_weak: 0px 1px 8px rgb(23 27 28 / 14%);
  --mf_shadow_strong: 0px 2px 16px rgb(23 27 28 / 22%);
}

/* stylelint-disable custom-property-pattern */

/**
 * Design System: mellow-fan ColorTokens v4 — Primitives
 *
 * Figma: https://www.figma.com/design/XWvimqdYIKJuWpThlSiqrZ/mellow-fan-%E8%89%B2%E6%9C%80%E7%B5%82%E8%AA%BF%E6%95%B4
 * 取得日: 2026-06-01
 *
 * セマンティックトークン (Background / Text / Border / Gradient / Social / Assets / System) の参照元。
 * コードからは直接参照せず、必ずセマンティック層 (--mf_surface_* / --mf_text_* / --mf_border_* など) 経由で利用すること。
 *
 * 命名: --mf_color_[category]-[shade]
 */
:root {
  /* Color/Black */
  --mf_color_black: #000;

  /* Color/White */
  --mf_color_white: #FFF;

  /* Color/Gray */
  --mf_color_gray-100: #1D1E21;
  --mf_color_gray-150: #2A2B2E;
  --mf_color_gray-200: #303236;
  --mf_color_gray-250: #3F4146;
  --mf_color_gray-300: #4B4D53;
  --mf_color_gray-400: #686B72;
  --mf_color_gray-700: #B8BABF;
  --mf_color_gray-900: #DFE0E2;
  --mf_color_gray-950: #F2F2F3;

  /* Color/WhiteAlpha */
  --mf_color_white-alpha-100: rgb(255 255 255 / 10%);
  --mf_color_white-alpha-150: rgb(255 255 255 / 15%);
  --mf_color_white-alpha-300: rgb(255 255 255 / 30%);
  --mf_color_white-alpha-400: rgb(255 255 255 / 40%);
  --mf_color_white-alpha-850: rgb(255 255 255 / 85%);

  /* Color/BlackAlpha (base: #171B1C) */
  --mf_color_black-alpha-0: rgb(23 27 28 / 0%);
  --mf_color_black-alpha-50: rgb(23 27 28 / 5%);
  --mf_color_black-alpha-100: rgb(23 27 28 / 10%);
  --mf_color_black-alpha-200: rgb(23 27 28 / 20%);
  --mf_color_black-alpha-300: rgb(23 27 28 / 30%);
  --mf_color_black-alpha-400: rgb(23 27 28 / 40%);
  --mf_color_black-alpha-500: rgb(23 27 28 / 50%);
  --mf_color_black-alpha-600: rgb(23 27 28 / 60%);
  --mf_color_black-alpha-800: rgb(23 27 28 / 80%);

  /* Color/Pink */
  --mf_color_pink-100: #FDD7E7;
  --mf_color_pink-300: #F587B5;
  --mf_color_pink-400: #F05694;
  --mf_color_pink-500: #E42F79;
  --mf_color_pink-600: #BA2260;
  --mf_color_pink-700: #9E1D52;
  --mf_color_pink-900: #58102E;

  /* Color/PinkAlpha (base: #E82B78) */
  --mf_color_pink-alpha-5: rgb(232 43 120 / 5%);
  --mf_color_pink-alpha-10: rgb(232 43 120 / 10%);
  --mf_color_pink-alpha-20: rgb(232 43 120 / 20%);
  --mf_color_pink-alpha-50: rgb(232 43 120 / 50%);

  /* Color/Blue */
  --mf_color_blue-100: #D6E1FD;
  --mf_color_blue-300: #7DA0F2;
  --mf_color_blue-400: #5483F2;
  --mf_color_blue-500: #2760E7;
  --mf_color_blue-600: #1F4DB9;
  --mf_color_blue-700: #1B419D;
  --mf_color_blue-900: #0F2458;

  /* Color/BlueAlpha (base: #2760E7) */
  --mf_color_blue-alpha-5: rgb(39 96 231 / 5%);
  --mf_color_blue-alpha-10: rgb(39 96 231 / 10%);
  --mf_color_blue-alpha-20: rgb(39 96 231 / 20%);
  --mf_color_blue-alpha-50: rgb(39 96 231 / 50%);

  /* Color/Purple */
  --mf_color_purple-100: #F1DAFD;
  --mf_color_purple-300: #D48FF9;
  --mf_color_purple-400: #C365F7;
  --mf_color_purple-500: #B034F4;
  --mf_color_purple-600: #8D2AC3;
  --mf_color_purple-700: #7823A6;
  --mf_color_purple-900: #43145D;

  /* Color/PurpleAlpha (base: #B034F4) */
  --mf_color_purple-alpha-5: rgb(176 52 244 / 5%);
  --mf_color_purple-alpha-10: rgb(176 52 244 / 10%);
  --mf_color_purple-alpha-20: rgb(176 52 244 / 20%);
  --mf_color_purple-alpha-50: rgb(176 52 244 / 50%);

  /* Color/Red */
  --mf_color_red-100: #FDD8D8;
  --mf_color_red-300: #F58A8A;
  --mf_color_red-400: #F15F5F;
  --mf_color_red-500: #E83030;
  --mf_color_red-600: #BA2626;
  --mf_color_red-700: #9E2121;
  --mf_color_red-900: #581212;

  /* Color/RedAlpha (base: #E83030) */
  --mf_color_red-alpha-5: rgb(232 48 48 / 5%);
  --mf_color_red-alpha-10: rgb(232 48 48 / 10%);
  --mf_color_red-alpha-20: rgb(232 48 48 / 20%);
  --mf_color_red-alpha-50: rgb(232 48 48 / 50%);

  /* Color/Green */
  --mf_color_green-100: #D5F7E2;
  --mf_color_green-300: #82E2A5;
  --mf_color_green-400: #53D784;
  --mf_color_green-500: #22C55E;
  --mf_color_green-600: #1B9E4B;
  --mf_color_green-700: #178640;
  --mf_color_green-900: #0D4B24;

  /* Color/GreenAlpha (base: #22C55E) */
  --mf_color_green-alpha-5: rgb(34 197 94 / 5%);
  --mf_color_green-alpha-10: rgb(34 197 94 / 10%);
  --mf_color_green-alpha-20: rgb(34 197 94 / 20%);
  --mf_color_green-alpha-50: rgb(34 197 94 / 50%);

  /* Color/Yellow */
  --mf_color_yellow-100: #FBF2D1;
  --mf_color_yellow-300: #F2D873;
  --mf_color_yellow-400: #EEC93D;
  --mf_color_yellow-500: #E8B800;
  --mf_color_yellow-600: #BA9300;
  --mf_color_yellow-700: #9E7D00;
  --mf_color_yellow-900: #584600;

  /* Color/YellowAlpha (base: #E8B800) */
  --mf_color_yellow-alpha-5: rgb(232 184 0 / 5%);
  --mf_color_yellow-alpha-10: rgb(232 184 0 / 10%);
  --mf_color_yellow-alpha-20: rgb(232 184 0 / 20%);
  --mf_color_yellow-alpha-50: rgb(232 184 0 / 50%);

  /* Social */
  --mf_social_apple-black: #000;
  --mf_social_facebook-blue: #007AF7;
  --mf_social_facebook-white: #FFF;
  --mf_social_google-gray: rgba(68 63 95 / 20%);
  --mf_social_google-black: #1F1F1F;
  --mf_social_x-white: #FFF;
  --mf_social_x-black: #0F1419;
  --mf_social_yahoo-gray: rgba(68 63 95 / 20%);
  --mf_social_yahoo-red: #F03;
}