/*
Theme Name: child-care-draft-2
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-2
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: theme.json emits the presets as --wp--preset--* (same values, same slugs) ; the
 *  --tfs-* vars below are the ROLE-NAMED delivery layer the theme CSS + Tailwind arbitrary values
 *  reference. Values are lifted verbatim from the approved page (index.html token block). A per-site
 *  design overrides ONLY these vars (inline, no rebuild). Names are by ROLE, never by value.
 * ============================================================================
 */
:root {
    /* — colour · surfaces — */
    --tfs-color-surface-page: #fcf8f4;
    --tfs-color-surface-muted: #f5ebe6;
    --tfs-color-surface-raised: #ffffff;
    --tfs-color-surface-inverse: #4a1d40;

    /* — colour · text — */
    --tfs-color-text-body: #2e1b2a;
    --tfs-color-text-muted: #6b5563;
    --tfs-color-text-inverse: #fff8f3;
    --tfs-color-text-on-accent: #2a1025;

    /* — colour · actions + accent — */
    --tfs-color-action-primary: #8d4778;
    --tfs-color-action-secondary: #5e2b52;
    --tfs-color-accent: #e5786b;

    /* — colour · borders (border-input is for form-control edges only: >=3:1 on fill and page ground) — */
    --tfs-color-border: #e6d6ce;
    --tfs-color-border-strong: #b39aa9;
    --tfs-color-border-input: #957488;

    /* — colour · label on the primary fill (measured: 6.04:1 on action-primary, AA) — */
    --tfs-color-on-primary: #fff8f3;

    /* — typography · families + fluid size scale — */
    --tfs-font-heading: "Fraunces", Georgia, "Times New Roman", serif;
    --tfs-font-body:    "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --tfs-text-xs: clamp(0.8rem, 0.78rem + 0.1vw, 0.875rem);
    --tfs-text-sm: clamp(0.95rem, 0.92rem + 0.12vw, 1rem);
    --tfs-text-base: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
    --tfs-text-md: clamp(1.3rem, 1.15rem + 0.6vw, 1.55rem);
    --tfs-text-lg: clamp(1.85rem, 1.4rem + 1.7vw, 2.9rem);
    --tfs-text-xl: clamp(2.9rem, 1.7rem + 5vw, 5.5rem);

    /* — spacing · 8px grid — */
    --tfs-space-20: 0.5rem;
    --tfs-space-30: 1rem;
    --tfs-space-40: 1.5rem;
    --tfs-space-50: 2rem;
    --tfs-space-60: clamp(2.5rem, 2.1rem + 2vw, 3.5rem);
    --tfs-space-70: clamp(3.5rem, 2.8rem + 3.5vw, 5.5rem);
    --tfs-space-80: clamp(4.5rem, 3.5rem + 5vw, 7.5rem);

    /* — shape — */
    --tfs-radius-sm: 0.5rem;
    --tfs-radius:    1rem;
    --tfs-radius-lg: 1.75rem;
    --tfs-shadow:    none;
}

/*
 * Structural base only — no design opinion. The look is Tailwind utilities over the tokens above.
 */
html {
    -webkit-text-size-adjust: 100%;
}

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

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

/* scroll-reveal (fade-up): hidden only once theme.js has set html.js; reduced motion shows everything */
.js [data-reveal] {
    opacity: 0;
    transform: translateY(1.5rem);
    transition:
        opacity 0.7s ease-out,
        transform 0.7s ease-out;
}

.js [data-reveal].is-in {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .js [data-reveal] {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* anchors land clear of the sticky header */
.site-main > section[id] {
    scroll-margin-top: 7rem;
}

/* WordPress admin bar offsets the sticky header */
body.admin-bar [data-tfs-section="primary_header"] {
    top: 32px;
}

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