/*
Theme Name: Childcare 15
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: childcare-15
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).
 *  factory-theme-flow v3: this run already has an APPROVED page (design-judge + solution-architect
 *  signed off on factory/runs/childcare-20260921194234-e1cde9/index.html). Every value below is LIFTED
 *  verbatim from that page's own inline <style> :root block — not re-derived — so this theme reproduces
 *  the approved design rather than a new interpretation of it.
 *  Two layers: WordPress emits the CMS-editable semantic presets from theme.json as --wp--preset--*;
 *  the --tfs-* aliases below are the ROLE-NAMED delivery layer the partials + Tailwind arbitrary-value
 *  classes reference. Each --tfs-* falls back to the approved page's own literal value, so the theme
 *  always renders identically even before any per-site override.
 * ============================================================================
 */
:root {
    /* — colour · semantic, CMS-editable (aliases theme.json presets) — */
    --tfs-color-surface-page:      var(--wp--preset--color--surface-page, #fafaf6);
    --tfs-color-surface-muted:     var(--wp--preset--color--surface-muted, #eef2ea);
    --tfs-color-text-body:         var(--wp--preset--color--text-body, #20291f);
    --tfs-color-action-primary:    var(--wp--preset--color--action-primary, #2f6b4a);
    --tfs-color-action-secondary:  var(--wp--preset--color--action-secondary, #7c4a2d);
    --tfs-color-accent:            var(--wp--preset--color--accent, #a85d28);

    /* — colour · structural, fixed (the approved page's palette.extras — not exposed to the CMS) — */
    --tfs-color-surface-inverse:      #14311f;
    --tfs-color-text-muted:           #57685d;
    --tfs-color-text-inverse:         #f5f7f1;
    --tfs-color-action-primary-hover: #255739;
    --tfs-color-border:               #d8ded2;

    /* — colour · labels — WCAG-AA gated, measured with agentic/tooling/design/contrast.mjs against this
     *   run's design-spec.json palette (never hand-judged). Every fill below is "white-or-dark" per the
     *   spec's contrast.label_rule EXCEPT `border`, the spec's one dark_label_only fill: white/near-white
     *   text on it is 1.37:1 and FAILS AA, so its label token carries text_body instead. `border` is never
     *   used to carry text on the approved page (1px stroke + inactive testimonial-dot fill only). —
     * text_inverse on action_primary        = 6.32:1
     * text_inverse on action_secondary      = 7.31:1
     * text_inverse on accent                = 4.93:1
     * text_inverse on action_primary_hover  = 8.40:1
     * text_body    on border                = 10.94:1  (text_inverse on border = 1.37:1, FAILS)
     */
    --tfs-color-on-primary:        #f5f7f1;
    --tfs-color-on-secondary:      #f5f7f1;
    --tfs-color-on-accent:         #f5f7f1;
    --tfs-color-on-primary-hover:  #f5f7f1;
    --tfs-color-on-border:         #20291f;

    /* — typography · families — */
    --tfs-font-heading: var(--wp--preset--font-family--heading, "Bitter", Georgia, "Times New Roman", serif);
    --tfs-font-body:    var(--wp--preset--font-family--body, "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);

    /* — typography · fluid 6-step scale, ~1.225 ratio (aliases theme.json presets) — */
    --tfs-text-xs:   var(--wp--preset--font-size--xs,   clamp(0.8rem, 0.78rem + 0.1vw, 0.875rem));
    --tfs-text-sm:   var(--wp--preset--font-size--sm,   clamp(0.925rem, 0.89rem + 0.15vw, 1rem));
    --tfs-text-base: var(--wp--preset--font-size--base, clamp(1.05rem, 1rem + 0.2vw, 1.125rem));
    --tfs-text-md:   var(--wp--preset--font-size--md,   clamp(1.3rem, 1.2rem + 0.45vw, 1.5rem));
    --tfs-text-lg:   var(--wp--preset--font-size--lg,   clamp(1.75rem, 1.5rem + 1vw, 2.25rem));
    --tfs-text-xl:   var(--wp--preset--font-size--xl,   clamp(2.4rem, 1.9rem + 2.2vw, 3.5rem));

    /* — spacing · 8px-grid scale, slug 50 = base (aliases 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 · soft radius scale + single reused shadow (fixed; WP has no preset scale for these) — */
    --tfs-radius-sm: 0.5rem;
    --tfs-radius:    1rem;
    --tfs-radius-lg: 1.75rem;
    --tfs-shadow: 0 12px 28px -8px rgba(20, 49, 31, 0.22), 0 2px 6px rgba(20, 49, 31, 0.1);
}

/*
 * Structural base only — no design opinion. Everything visual is Tailwind utilities (arbitrary-value
 * var() references) carried verbatim from the approved page onto the partials. This block mirrors the
 * approved page's own inline <style> html/body/section[id] rules, plus the standard factory boilerplate
 * scaffolding (admin-bar offset, ::selection) that the approved page's static mockup had no reason to
 * include but a live WP install does.
 */
html { -webkit-text-size-adjust: 100%; }

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

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

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

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

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