/*
 Theme Name:   GeneratePress Child
 Theme URI:    https://generatepress.com
 Description:  Default GeneratePress child theme
 Author:       Tom Usborne
 Author URI:   https://tomusborne.com
 Template:     generatepress
 Version:      0.1
*/

/* # Semantic colour variables */

/* ## Light mode (default) */

:root,
.scheme-light {
    --card-fill: var(--neutral-100);
    --card-fill-hover: var(--neutral-200);
	--card-stroke: var(--neutral-300);
	--card-stroke-hover: var(--neutral-400);

    --content-default: var(--neutral-800);
    --content-default-hover: var(--secondary-300);

    --content-highlight-primary: var(--primary-500);
    --content-highlight-primary-hover: var(--primary-500);

    --content-highlight-secondary: var(--accent-500);
    --content-highlight-secondary-hover: var(--accent-500);

    --heading-default: var(--neutral-800);
    --heading-default-hover: var(--primary-500);

    --icon-primary: var(--primary-500);
    --icon-primary-hover: var(--primary-300);

    --icon-secondary: var(--secondary-300);
    --icon-secondary-hover: var(--primary-500);

    --section-fill-primary: var(--neutral-200);
    --section-fill-primary-hover: var(--neutral-200);

    --section-fill-secondary: var(--neutral-300);
    --section-fill-secondary-hover: var(--neutral-300);
}


/* ## Dark mode
Apply "scheme-dark" to the outer section container. */

.scheme-dark {
    --card-fill: var(--primary-700);
    --card-fill-hover: var(--neutral-700);
	--card-stroke: var(--neutral-700);
	--card-stroke-hover: var(--neutral-600);

    --content-default: var(--neutral-200);
    --content-default-hover: var(--neutral-100);

    --content-highlight-primary: var(--primary-300);
    --content-highlight-primary-hover: var(--primary-300);

    --content-highlight-secondary: var(--accent-300);
    --content-highlight-secondary-hover: var(--accent-300);

    --heading-default: var(--neutral-200);
    --heading-default-hover: var(--primary-300);

    --icon-primary: var(--primary-300);
    --icon-primary-hover: var(--neutral-300);

    --icon-secondary: var(--neutral-300);
    --icon-secondary-hover: var(--neutral-200);

    --section-fill-primary: var(--primary-700);
    --section-fill-primary-hover: var(--primary-700);

    --section-fill-secondary: var(--secondary-700);
    --section-fill-secondary-hover: var(--secondary-700);
}

/* ## Semantic hover state
 Add "has-semantic-hover" only to an interactive element, such as a linked card or interactive text element. It temporarily remaps all semantic variables to their corresponding hover values. */

.has-semantic-hover:hover,
.has-semantic-hover:focus-within {
    --card-fill: var(--card-fill-hover);
	--card-stroke: var(--card-stroke-hover);

    --content-default: var(--content-default-hover);

    --content-highlight-primary:
        var(--content-highlight-primary-hover);

    --content-highlight-secondary:
        var(--content-highlight-secondary-hover);

    --heading-default: var(--heading-default-hover);

    --icon-primary: var(--icon-primary-hover);
    --icon-secondary: var(--icon-secondary-hover);

    --section-fill-primary:
        var(--section-fill-primary-hover);

    --section-fill-secondary:
        var(--section-fill-secondary-hover);
}


/* ### Parent interaction
The below ensures text inside an interactive container responds when the parent enters its hover or keyboard-focus state. */

.has-semantic-hover:is(:hover, :focus-within)
:is(p, li, dt, dd, blockquote, figcaption) {
    color: var(--content-default);
}

.has-semantic-hover:is(:hover, :focus-within)
:is(h1, h2, h3, h4, h5, h6) {
    color: var(--heading-default);
}

/* ## Transitions */

@media (prefers-reduced-motion: no-preference) {
    .card-fill,
    .content-default,
    .content-highlight-primary,
    .content-highlight-secondary,
    .heading-default,
    .icon-primary,
    .icon-secondary,
    .has-semantic-hover
    :is(h1, h2, h3, h4, h5, h6, p, li, dt, dd) {
        transition:
            color 200ms ease,
            background-color 200ms ease;
    }
}