/*
Theme Name: Child Care Draft 4
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-4
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 primitive/semantic 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). Each --tfs-* falls back to a neutral gray if the preset
 *  is absent, so the boilerplate always renders. Names are by ROLE, never by value.
 * ============================================================================
 */
:root {
    /* — colour · semantic (role-named delivery layer over theme.json presets) — */
    --tfs-color-surface-page:      var(--wp--preset--color--surface-page, #fffaf5);
    --tfs-color-surface-muted:     var(--wp--preset--color--surface-muted, #fbeaf0);
    --tfs-color-text-body:         var(--wp--preset--color--text-body, #48323f);
    --tfs-color-action-primary:    var(--wp--preset--color--action-primary, #a3245a);
    --tfs-color-action-secondary:  var(--wp--preset--color--action-secondary, #3a0f29);
    --tfs-color-accent:            var(--wp--preset--color--accent, #ffd86b);
    --tfs-color-surface-accent:    var(--wp--preset--color--surface-accent, #fff0bd);
    --tfs-color-surface-inverse:   var(--wp--preset--color--surface-inverse, #3f1230);
    --tfs-color-text-heading:      var(--wp--preset--color--text-heading, #3a0f29);
    --tfs-color-text-on-inverse:   var(--wp--preset--color--text-on-inverse, #fff4ea);
    --tfs-color-border:            var(--wp--preset--color--border, #e9c9d6);

    /* — colour · structural — */
    --tfs-color-surface-card: #ffffff;
    --tfs-color-text-muted:   #48323f;
    --tfs-color-shadow:       rgba(63, 18, 48, .35);

    /* — label colours (measured: white on action-primary passes AA; accent takes DARK text only) — */
    --tfs-color-on-primary:   #ffffff;
    --tfs-color-on-secondary: #ffffff;
    --tfs-color-on-accent:    var(--tfs-color-text-heading);
    --tfs-color-on-inverse:   var(--tfs-color-text-on-inverse);

    /* — approved-page token names (the partials carry these literally) — */
    --tfs-color-brand-primary:    var(--tfs-color-action-primary);
    --tfs-color-brand-on-primary: var(--tfs-color-on-primary);
    --tfs-color-brand-butter:     var(--tfs-color-accent);
    --tfs-color-surface-subtle:   var(--tfs-color-surface-muted);

    /* — shape — */
    --tfs-radius-md: 14px;
    --tfs-radius-lg: 24px;
    --tfs-shadow-soft: 0 12px 30px -12px rgba(63, 18, 48, .35);

    /* — motion — */
    --tfs-motion-duration: 600ms;
    --tfs-motion-ease: ease;

    /* — typography — */
    --tfs-font-body:    var(--wp--preset--font-family--body, 'Nunito Sans Variable', system-ui, sans-serif);
    --tfs-font-heading: var(--wp--preset--font-family--heading, 'Fraunces Variable', Georgia, serif);

    --tfs-text-xs:  var(--wp--preset--font-size--x-small, .875rem);
    --tfs-text-sm:  var(--wp--preset--font-size--small, 1rem);
    --tfs-text-md:  var(--wp--preset--font-size--medium, 1.25rem);
    --tfs-text-lg:  var(--wp--preset--font-size--large, 1.75rem);
    --tfs-text-xl:  var(--wp--preset--font-size--x-large, 2.5rem);
    --tfs-text-2xl: var(--wp--preset--font-size--xx-large, 3.75rem);

    /* — spacing — */
    --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 — lifted from the approved page's own <style> block (every rule it had). */
html { scroll-padding-top: 7rem; }
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family: var(--tfs-font-body);
    background: var(--tfs-color-surface-page);
    color: var(--tfs-color-text-body);
}
h1, h2, h3 { font-family: var(--tfs-font-heading); }
.container { width: 100%; max-width: 72rem; margin-inline: auto; padding-inline: 1.5rem; }
.skip-link { position: absolute; left: -999px; }
.skip-link:focus { left: 1rem; top: 1rem; z-index: 100; background: #fff; padding: .5rem 1rem; }

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

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