/*
Theme Name: Scalesuite（カリノソシキ）Child Theme
Theme URI: https://karinososhiki.com/
Template: scalesuite-theme
Author: Scalesuite
Author URI: https://sse.jp/
Description: 操作説明やスクリーンショットで使用する仮組織「カリノソシキ」専用の子テーマ。実在する組織を表すものではありません。
Version: 0.5.0
Update URI: https://updates.scalesuite.dev/karinososhiki-child
Requires at least: 7.0
Tested up to: 7.1
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: karinososhiki-child
*/

/*
 * このサイト固有の差分だけを書く。
 *
 * 親の functions.php が親・子双方の style.css を読み込むため、functions.php は置きません。
 * 色 preset は子テーマの theme.json で置き換えます。
 *
 * Update URI は親の inc/updater.php が拾います。更新処理を子へ複製しません。
 */

/*
 * 0.3.0 で公開した karino-* preset は保存済みコンテンツの互換面です。
 * 0.4.0 から編集画面では karinososhiki-child-* を使いますが、旧 slug で保存された
 * 色・gradient はこの alias で描画を維持します。
 */

:root {
	--wp--preset--color--karino-cyan: var(--wp--preset--color--karinososhiki-child-brand-cyan);
	--wp--preset--color--karino-green: var(--wp--preset--color--karinososhiki-child-brand-green);
	--wp--preset--color--karino-lime: var(--wp--preset--color--karinososhiki-child-brand-lime);
	--wp--preset--color--karino-orange: var(--wp--preset--color--karinososhiki-child-brand-orange);
	--wp--preset--color--karino-pink: var(--wp--preset--color--karinososhiki-child-brand-pink);
	--wp--preset--color--karino-purple: var(--wp--preset--color--karinososhiki-child-brand-purple);
	--wp--preset--gradient--karino-cobalt-magenta: linear-gradient(120deg, #003bff 0%, #d9006c 100%);
	--wp--preset--gradient--karino-orange-yellow: linear-gradient(120deg, #ff5a00 0%, #ffe600 100%);
	--wp--preset--gradient--karino-cyan-lime: linear-gradient(120deg, #00c8ff 0%, #b8ff00 100%);
	--wp--preset--gradient--karino-neon-night: linear-gradient(120deg, #0b0b16 0%, #8a2eff 55%, #ff2e88 100%);
}

.has-karino-cyan-color { color: var(--wp--preset--color--karino-cyan) !important; }
.has-karino-green-color { color: var(--wp--preset--color--karino-green) !important; }
.has-karino-lime-color { color: var(--wp--preset--color--karino-lime) !important; }
.has-karino-orange-color { color: var(--wp--preset--color--karino-orange) !important; }
.has-karino-pink-color { color: var(--wp--preset--color--karino-pink) !important; }
.has-karino-purple-color { color: var(--wp--preset--color--karino-purple) !important; }

.has-karino-cyan-background-color { background-color: var(--wp--preset--color--karino-cyan) !important; }
.has-karino-green-background-color { background-color: var(--wp--preset--color--karino-green) !important; }
.has-karino-lime-background-color { background-color: var(--wp--preset--color--karino-lime) !important; }
.has-karino-orange-background-color { background-color: var(--wp--preset--color--karino-orange) !important; }
.has-karino-pink-background-color { background-color: var(--wp--preset--color--karino-pink) !important; }
.has-karino-purple-background-color { background-color: var(--wp--preset--color--karino-purple) !important; }

.has-karino-cyan-border-color { border-color: var(--wp--preset--color--karino-cyan) !important; }
.has-karino-green-border-color { border-color: var(--wp--preset--color--karino-green) !important; }
.has-karino-lime-border-color { border-color: var(--wp--preset--color--karino-lime) !important; }
.has-karino-orange-border-color { border-color: var(--wp--preset--color--karino-orange) !important; }
.has-karino-pink-border-color { border-color: var(--wp--preset--color--karino-pink) !important; }
.has-karino-purple-border-color { border-color: var(--wp--preset--color--karino-purple) !important; }

.has-karino-cobalt-magenta-gradient-background { background: var(--wp--preset--gradient--karino-cobalt-magenta) !important; }
.has-karino-orange-yellow-gradient-background { background: var(--wp--preset--gradient--karino-orange-yellow) !important; }
.has-karino-cyan-lime-gradient-background { background: var(--wp--preset--gradient--karino-cyan-lime) !important; }
.has-karino-neon-night-gradient-background { background: var(--wp--preset--gradient--karino-neon-night) !important; }

/*
 * Karino pop color layer
 * 色の選択肢は theme.json に集約し、ここではサイト上で常に見える
 * 小さなアクセントだけを足す。本文の可読性は親テーマの設計を継承する。
 */

::selection {
	color: var(--wp--preset--color--scalesuite-ink);
	background: var(--wp--preset--color--scalesuite-highlight);
}

.wp-block-paragraph.is-style-eyebrow {
	color: var(--wp--preset--color--scalesuite-accent);
}

.wp-block-quote {
	border-inline-start-color: var(--wp--preset--color--scalesuite-accent);
	color: var(--wp--preset--color--scalesuite-ink);
}

.wp-block-separator:not(.has-background) {
	border-color: var(--wp--preset--color--scalesuite-primary);
	border-block-start-width: 3px;
}

.wp-block-group.is-style-panel {
	border-block-start: 4px solid var(--wp--preset--color--scalesuite-primary);
}

:where(.wp-block-group.is-style-panel:hover),
:where(.wp-block-group.is-style-panel:focus-within) {
	border-color: var(--wp--preset--color--scalesuite-primary);
	box-shadow: 4px 4px 0 var(--wp--preset--color--scalesuite-primary-tint);
}