/*
Theme Name:        SlipStage
Description:       SlipStage's site in the look of its editor: dark panels, stage-light amber, Noto Sans and Libre Baskerville. A child of Twenty Twenty-Five.
Template:          twentytwentyfive
Version:           0.1.0
Requires at least: 6.7
Requires PHP:      8.1
Author:            Phantom Animation, Inc.
License:           Proprietary; the fonts are under the SIL Open Font License ( assets/fonts )
Text Domain:       slipstage
*/

/*
 * theme.json holds the editor's colours and type ( Include/Engine/UI/UIWidgets.h, UI::Style,
 * in Encore ).  This holds what theme.json can't say.
 */

/* The header and footer, in the editor's chrome */
.slipstage-header,
.slipstage-footer
{
	background-color: var( --wp--preset--color--chrome );
	padding-top: var( --wp--preset--spacing--30 );
	padding-bottom: var( --wp--preset--spacing--30 );
}

.slipstage-header
{
	border-bottom: 1px solid var( --wp--preset--color--accent-6 );
}

.slipstage-footer
{
	border-top: 1px solid var( --wp--preset--color--accent-6 );
	color: var( --wp--preset--color--muted );
	font-size: var( --wp--preset--font-size--small );
	margin-block-start: var( --wp--preset--spacing--60 );
}

.slipstage-footer .wp-block-site-title
{
	font-size: var( --wp--preset--font-size--medium );
}

/* The mark beside the site's name, as in the editor's title bar */
.slipstage-header .wp-block-site-title a::before
{
	content: "";
	display: inline-block;
	width: 2.9rem;
	height: 1.75rem;
	margin-right: 0.625rem;
	vertical-align: middle;
	background: url( "assets/logo.png" ) center / contain no-repeat;
}

/* Fields, as the editor draws them */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="url"],
input[type="tel"],
input[type="number"],
textarea,
select
{
	background-color: var( --wp--preset--color--field );
	color: var( --wp--preset--color--contrast );
	border: 1px solid var( --wp--preset--color--edge );
	border-radius: 6px;
	padding: 0.5rem 0.75rem;
	font: inherit;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="url"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus
{
	outline: none;
	border-color: var( --wp--preset--color--focus );
	box-shadow: 0 0 0 1px var( --wp--preset--color--focus );
}

::placeholder
{
	color: var( --wp--preset--color--muted );
	opacity: 1;
}

/* The editor's selected text: amber at 22% over a panel */
::selection
{
	background-color: #443628;
	color: var( --wp--preset--color--strong );
}