/*
Theme Name: Twenty Twenty-Four Child
Template: twentytwentyfour
Description: Minimalist child theme with Web Awesome integration.
Version: 1.0
*/

:root {
    /* Map WP Colors to Web Awesome Tokens */
    --wp--preset--color--primary: var(--wa-color-primary-600);
    --wp--preset--color--secondary: var(--wa-color-neutral-600);
    --wp--preset--color--background: var(--wa-color-neutral-0);
    --wp--preset--color--foreground: var(--wa-color-neutral-950);

    /* Map WP Typography to Web Awesome Tokens */
    --wp--preset--font-family--heading: var(--wa-font-sans);
    --wp--preset--font-family--body: var(--wa-font-sans);
    
    /* Map WP Spacing/Radii */
    --wp--preset--spacing--20: var(--wa-spacing-medium);
    --wp--preset--border-radius--small: var(--wa-border-radius-small);
    --wp--preset--border-radius--medium: var(--wa-border-radius-medium);
}

/* Hide Web Awesome components until they are defined */
:root.wa-cloak wa-button,
:root.wa-cloak wa-icon,
:root.wa-cloak wa-card {
  opacity: 0;
}

/* Or, use a transition for a smoother "fade-in" effect */
:root:not(.wa-cloak) wa-button,
:root:not(.wa-cloak) wa-icon {
  transition: opacity 0.2s ease-in;
}

/* Force Web Awesome to be the base font */
body {
    font-family: var(--wa-font-sans);
    color: var(--wa-color-neutral-900);
    background-color: var(--wa-color-neutral-0);
    -webkit-font-smoothing: antialiased;
}