/*
Theme Name: Child Care 13
Theme URI: https://example.com
Description: Generated by the TFS Theme Factory. The design surface (token values, enqueues, behaviour) is written by the build phase.
Author: TFS Systems
Author URI: https://aptecsol.com
Version: 1.1.0
Requires at least: 5.9
Tested up to: 6.4
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: child-care-13
Tags: custom-header, custom-menu, featured-images, flexible-header, full-width-template
*/

/*
 * ============================================================================
 *  TOKENS — the ONLY styling surface (LOCKED model, see .claude/rules/factory-theming.md).
 *  Lifted from the approved page's own :root block (design_system of the approved design-spec).
 *  Two layers: WordPress emits the presets from theme.json as --wp--preset--* ; the
 *  --tfs-* aliases below are the ROLE-NAMED delivery layer that the theme CSS + Tailwind
 *  reference. A per-site design overrides ONLY these semantic vars (inline, no rebuild).
 *  Names are by ROLE, never by value.
 * ============================================================================
 */
:root {
    /* — colour · semantic (the six palette roles; theme.json presets) — */
    --tfs-color-surface-page:      var(--wp--preset--color--surface-page, #F7FAFF);
    --tfs-color-surface-muted:     var(--wp--preset--color--surface-muted, #DFE5FF);
    --tfs-color-text-body:         var(--wp--preset--color--text-body, #282B46);
    --tfs-color-action-primary:    var(--wp--preset--color--action-primary, #5551D8);
    --tfs-color-action-secondary:  var(--wp--preset--color--action-secondary, #9072DF);
    --tfs-color-accent:            var(--wp--preset--color--accent, #F062DA);

    /* — colour · structural (design_system.palette.extras; fixed, not exposed to the CMS) — */
    --tfs-color-surface-card:      #FFFFFF;
    --tfs-color-surface-inverse:   #1B1D3B;
    --tfs-color-text-ink:          #020113;
    --tfs-color-text-on-inverse:   #F7FAFF;
    --tfs-color-text-muted:        var(--tfs-color-text-body);
    --tfs-color-accent-tint:       #FBD3F4;
    --tfs-color-secondary-tint:    #E4DBFB;
    --tfs-color-highlight:         #FFD84A;
    --tfs-color-border:            #282B46;
    --tfs-color-scrim:             rgb(2 1 19 / 0.6);

    /*
     * — colour · LABEL rule (design_system.contrast, measured by contrast.mjs) —
     * action-primary takes a WHITE label only; every other fill below takes the DARK ink label
     * (white on them fails AA). A `bg-<fill> text-white` pairing on any dark-label fill is a defect.
     */
    --tfs-color-action-on-primary:    #FFFFFF;
    --tfs-color-on-primary:           #FFFFFF;
    --tfs-color-on-action-secondary:  #020113;
    --tfs-color-on-accent:            #020113;
    --tfs-color-on-highlight:         #020113;
    --tfs-color-on-accent-tint:       #020113;
    --tfs-color-on-secondary-tint:    #020113;

    /* — shape · radius + hard-offset sticker shadows (no blur) — */
    --tfs-radius-md:            16px;
    --tfs-radius-lg:            24px;
    --tfs-shadow-hairline:      0 1px 0 rgb(0 0 0 / 0.06);
    --tfs-shadow-sticker:       var(--wp--preset--shadow--sticker, 6px 6px 0 0 var(--tfs-color-text-body));
    --tfs-shadow-sticker-hover: var(--wp--preset--shadow--sticker-hover, 9px 9px 0 0 var(--tfs-color-text-body));

    /* — typography · families (Gabarito headings, Onest body; loaded from the pinned CDN) — */
    --tfs-font-heading: var(--wp--preset--font-family--heading, 'Gabarito Variable', 'Gabarito', ui-rounded, system-ui, sans-serif);
    --tfs-font-body:    var(--wp--preset--font-family--body, 'Onest Variable', 'Onest', system-ui, sans-serif);

    /* — typography · size scale (aliases to theme.json presets) — */
    --tfs-text-xs:  var(--wp--preset--font-size--x-small, .875rem);
    --tfs-text-sm:  var(--wp--preset--font-size--small, 1.0625rem);
    --tfs-text-md:  var(--wp--preset--font-size--medium, 1.5rem);
    --tfs-text-lg:  var(--wp--preset--font-size--large, 1.75rem);
    --tfs-text-xl:  var(--wp--preset--font-size--x-large, clamp(2rem, 4.2vw, 3.157rem));
    --tfs-text-2xl: var(--wp--preset--font-size--xx-large, clamp(2.6rem, 6vw, 5.25rem));

    /* — spacing · 8px grid, slug 50 = base (aliases to theme.json presets) — */
    --tfs-space-2xs: var(--wp--preset--spacing--20, .25rem);
    --tfs-space-xs:  var(--wp--preset--spacing--30, .5rem);
    --tfs-space-sm:  var(--wp--preset--spacing--40, 1rem);
    --tfs-space-md:  var(--wp--preset--spacing--50, 1.5rem);
    --tfs-space-lg:  var(--wp--preset--spacing--60, clamp(2rem, 4vw, 3rem));
    --tfs-space-xl:  var(--wp--preset--spacing--70, clamp(3rem, 6vw, 5rem));
    --tfs-space-2xl: var(--wp--preset--spacing--80, clamp(4rem, 8vw, 8rem));
}

/*
 * Structural base only — lifted from the approved page's own <style> block; no design opinion.
 * Everything visual is Tailwind utilities mapped onto the tokens above.
 */
html {
    scroll-padding-top: 6.5rem;
}

body {
    margin: 0;
    overflow-x: clip;
    background: var(--tfs-color-surface-page);
    color: var(--tfs-color-text-body);
    font-family: var(--tfs-font-body);
}

h1, h2, h3, h4 {
    margin: 0;
    font-family: var(--tfs-font-heading);
    color: var(--tfs-color-text-ink);
}

::selection {
    background: var(--tfs-color-accent);
    color: var(--tfs-color-text-ink);
}

:focus-visible {
    outline: 3px solid var(--tfs-color-text-ink);
    outline-offset: 3px;
}

footer :focus-visible {
    outline-color: var(--tfs-color-text-on-inverse);
}

[tabindex="-1"]:focus {
    outline: none;
}

.skip-link {
    position: absolute;
    left: -999px;
    top: 0;
    z-index: 100;
}

.skip-link:focus {
    left: 1rem;
    top: 1rem;
    padding: 0.5rem 1rem;
    background: var(--tfs-color-surface-card);
    border: 3px solid var(--tfs-color-border);
    border-radius: 999px;
}

@media (prefers-reduced-motion: reduce) {
    * {
        scroll-behavior: auto !important;
        transition: none !important;
        animation: none !important;
    }
}

/* WordPress admin bar (logged-in only): keep the sticky header below it. */
body.admin-bar > header.sticky {
    top: 32px;
}

@media (max-width: 782px) {
    body.admin-bar > header.sticky {
        top: 46px;
    }
}