/* Declare layer order first so all subsequent @layer blocks slot in correctly. */
@layer reset, tokens, primitives, typography, components, modules, child;

@layer tokens {
  :root {
    /* Colors — bridge to the child theme.json palette; neutral grayscale fallbacks
       keep the bare parent aesthetic-neutral when no child brand is active. */
    --color-brand-primary:   var(--wp--preset--color--brand-primary,   #1A1A1A);
    --color-brand-secondary: var(--wp--preset--color--brand-secondary, #555555);
    --color-brand-accent:    var(--wp--preset--color--brand-accent,    #6B6B6B);
    --color-bg:              var(--wp--preset--color--bg,               #FFFFFF);
    --color-bg-alt:          var(--wp--preset--color--bg-alt,           #FFFFFF);
    --color-base-2:          var(--wp--preset--color--base-2,           #FFFFFF);
    --color-text:            var(--wp--preset--color--text,             #1A1A1A);
    --color-text-light:      var(--wp--preset--color--text-light,       #FFFFFF);

    /* Font families — bridge to the child theme.json fontFamilies; system fallbacks. */
    --font-display: var(--wp--preset--font-family--display, system-ui, sans-serif);
    --font-subhead: var(--wp--preset--font-family--subhead, system-ui, sans-serif);
    --font-body:    var(--wp--preset--font-family--body,    system-ui, sans-serif);
    --font-mono:    var(--wp--preset--font-family--mono, ui-monospace, "SF Mono", Monaco, Consolas, "Courier New", monospace);

    /* Font sizes — clamp values match theme.json fontSizes */
    --size-xs:   clamp(0.75rem,  0.7rem  + 0.25vw,   0.875rem);
    --size-sm:   clamp(0.875rem, 0.83rem + 0.25vw,   1rem);
    --size-base: clamp(1rem,     0.95rem + 0.25vw,   1.125rem);
    --size-lg:   clamp(1.125rem, 1.05rem + 0.375vw,  1.25rem);
    --size-xl:   clamp(1.25rem,  1.1rem  + 0.75vw,   1.5rem);
    --size-2xl:  clamp(1.5rem,   1.3rem  + 1vw,      1.875rem);
    --size-3xl:  clamp(1.875rem, 1.5rem  + 1.875vw,  2.5rem);
    --size-4xl:  clamp(2.5rem,   1.875rem + 3.125vw, 3.75rem);

    /* Spacing — ~1.25 ratio, clamp values match theme.json spacingSizes */
    --space-2xs: clamp(0.25rem, 0.2rem   + 0.25vw,  0.5rem);
    --space-xs:  clamp(0.5rem,  0.45rem  + 0.25vw,  0.75rem);
    --space-sm:  clamp(0.75rem, 0.7rem   + 0.25vw,  1rem);
    --space-md:  clamp(1rem,    0.9rem   + 0.5vw,   1.25rem);
    --space-lg:  clamp(1.25rem, 1.1rem   + 0.75vw,  1.5rem);
    --space-xl:  clamp(1.5rem,  1.25rem  + 1.25vw,  2rem);
    --space-2xl: clamp(2rem,    1.6rem   + 2vw,     2.5rem);
    --space-3xl: clamp(2.5rem,  1.875rem + 3.125vw, 3.5rem);

    /* Layout — match theme.json layout.contentSize and wideSize */
    --layout-content-size: 720px;
    --layout-wide-size:    1200px;

    /* Breakpoints (documented here; use raw values in @media queries) */
    --bp-sm: 640px;
    --bp-md: 768px;
    --bp-lg: 1024px;
    --bp-xl: 1280px;
  }
}