/*
Theme Name: Child Care Draft 3
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-draft-3
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).
 *  Two layers: WordPress emits the presets from theme.json as --wp--preset--* ; the --tfs-*
 *  aliases below are the ROLE-NAMED delivery layer the theme CSS + Tailwind reference.
 *  Values are the approved page's own token block (design-spec design_system). A per-site
 *  design overrides ONLY these semantic vars (inline, no rebuild). Names are by ROLE.
 * ============================================================================
 */
:root {
    /* — colour · semantic — */
    --tfs-color-surface-page:         var(--wp--preset--color--surface-page, #fbf9fa);
    --tfs-color-surface-muted:        var(--wp--preset--color--surface-muted, #f1ecf0);
    --tfs-color-surface-inverse:      var(--wp--preset--color--surface-inverse, #2a1226);
    --tfs-color-text-body:            var(--wp--preset--color--text-body, #221720);
    --tfs-color-text-muted:           var(--wp--preset--color--text-muted, #5f5060);
    --tfs-color-text-inverse:         var(--wp--preset--color--text-inverse, #f7eef5);
    --tfs-color-text-inverse-muted:   var(--wp--preset--color--text-inverse-muted, #cdb8c9);
    --tfs-color-action-primary:       var(--wp--preset--color--action-primary, #8a1d5e);
    --tfs-color-action-primary-hover: var(--wp--preset--color--action-primary-hover, #6b1249);
    --tfs-color-action-secondary:     var(--wp--preset--color--action-secondary, #2a1226);
    --tfs-color-accent:               var(--wp--preset--color--accent, #b0306f);
    --tfs-color-border:               var(--wp--preset--color--border, #d9ced6);
    --tfs-color-border-inverse:       var(--wp--preset--color--border-inverse, #6a4864);

    /* — colour · label on a fill (measured: 7.65:1 on action-primary; contrast in design-spec) — */
    --tfs-color-on-primary:           #f7eef5;

    /* — typography · families — */
    --tfs-font-heading: var(--wp--preset--font-family--heading, "Space Grotesk", "Helvetica Neue", Arial, sans-serif);
    --tfs-font-body:    var(--wp--preset--font-family--body, "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);

    /* — typography · size scale (aliases to theme.json presets) — */
    --tfs-text-xs:      var(--wp--preset--font-size--x-small, 0.8125rem);
    --tfs-text-sm:      var(--wp--preset--font-size--small, 0.9375rem);
    --tfs-text-base:    var(--wp--preset--font-size--base, 1.0625rem);
    --tfs-text-md:      var(--wp--preset--font-size--medium, clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem));
    --tfs-text-lg:      var(--wp--preset--font-size--large, clamp(1.6rem, 1.3rem + 1.2vw, 2.25rem));
    --tfs-text-xl:      var(--wp--preset--font-size--x-large, clamp(2rem, 1.4rem + 2.4vw, 3.5rem));
    --tfs-text-display: var(--wp--preset--font-size--display, clamp(2.5rem, 1.1rem + 5vw, 5.5rem));
    --tfs-text-numeral: var(--wp--preset--font-size--numeral, clamp(3.5rem, 2rem + 5.5vw, 7rem));

    /* — spacing · 8px grid, WP slugs 20 to 80 (aliases to theme.json presets) — */
    --tfs-space-20: var(--wp--preset--spacing--20, 0.5rem);
    --tfs-space-30: var(--wp--preset--spacing--30, 1rem);
    --tfs-space-40: var(--wp--preset--spacing--40, 1.5rem);
    --tfs-space-50: var(--wp--preset--spacing--50, 2rem);
    --tfs-space-60: var(--wp--preset--spacing--60, clamp(2.5rem, 2.1rem + 2vw, 3.5rem));
    --tfs-space-70: var(--wp--preset--spacing--70, clamp(3.5rem, 2.8rem + 3.5vw, 5.5rem));
    --tfs-space-80: var(--wp--preset--spacing--80, clamp(4.5rem, 3.5rem + 5vw, 7.5rem));

    /* — shape — */
    --tfs-radius: 0;
    --tfs-shadow: none;
}

/*
 * Structural base only — no design opinion. Everything visual is Tailwind utilities
 * mapped onto the tokens above. In-page anchor smooth-scroll lives in assets/js/theme.js
 * (never a document-level scroll-behavior).
 */
html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family: var(--tfs-font-body);
    color: var(--tfs-color-text-body);
    background: var(--tfs-color-surface-page);
}

section[id] {
    scroll-margin-top: 7rem;
}

::selection {
    background: var(--tfs-color-action-primary);
    color: var(--tfs-color-text-inverse);
}

body.admin-bar [data-tfs-section="primary_header"] {
    top: 32px;
}

@media (max-width: 782px) {
    body.admin-bar [data-tfs-section="primary_header"] {
        top: 46px;
    }
}