/**
 * File: assets/css/frontend/design-system/system.css
 * Purpose: Applies T9 runtime tokens to theme-owned generic typography, buttons, forms, cards, notices, pagination, empty states, and media.
 * Scope: Generic frontend design-system presentation only; feature-specific and plugin-owned components retain their owning styles.
 * Related PHP: src/Frontend/DesignSystem/DesignSystemPresentation.php, src/Frontend/DesignSystem/RuntimeTokenBuilder.php
 * Related CSS: assets/css/foundation/tokens.css, assets/css/foundation/base.css
 * Related JS: None
 * Package: HyperDAF Pro
 */

:where(h1, h2, h3, h4, h5, h6),
:where(.hdf-entry__title, .hdf-page-title, .hdf-blog-title, .hdf-search-title) {
    font-family: var(--hdf-typography-family-heading, var(--hdf-typography-family-sans));
    font-weight: var(--hdf-typography-weight-heading, var(--hdf-typography-weight-bold));
    line-height: var(--hdf-typography-line-height-tight);
}

code,
kbd,
samp,
pre {
    font-family: var(--hdf-typography-family-mono);
}

.hdf-button,
.hdf-site-main .wp-element-button,
.hdf-site-main .wp-block-button__link,
.hdf-site-main button[type="submit"],
.hdf-site-main input[type="submit"] {
    display: inline-flex;
    min-height: var(--hdf-component-button-height);
    align-items: center;
    justify-content: center;
    gap: var(--hdf-component-button-icon-gap);
    padding-inline: var(--hdf-component-button-padding-x);
    border: var(--hdf-border-width-default) solid var(--hdf-color-primary-strong);
    border-radius: var(--hdf-component-button-radius);
    background: var(--hdf-color-primary-strong);
    color: var(--hdf-color-on-primary-strong);
    font-weight: var(--hdf-component-button-weight);
    line-height: 1;
    text-decoration: none;
    text-transform: var(--hdf-component-button-text-transform);
    cursor: pointer;
    transition:
        color var(--hdf-motion-duration-fast) var(--hdf-motion-easing-standard),
        background-color var(--hdf-motion-duration-fast) var(--hdf-motion-easing-standard),
        border-color var(--hdf-motion-duration-fast) var(--hdf-motion-easing-standard),
        box-shadow var(--hdf-motion-duration-fast) var(--hdf-motion-easing-standard),
        transform var(--hdf-motion-duration-fast) var(--hdf-motion-easing-standard);
}

.hdf-button:hover,
.hdf-site-main .wp-element-button:hover,
.hdf-site-main .wp-block-button__link:hover,
.hdf-site-main button[type="submit"]:hover,
.hdf-site-main input[type="submit"]:hover {
    border-color: var(--hdf-color-primary-hover);
    background: var(--hdf-color-primary-hover);
    color: var(--hdf-color-on-primary-strong);
    transform: translateY(var(--hdf-component-hover-lift));
}

.hdf-button--secondary,
.hdf-site-main .is-style-outline > .wp-block-button__link {
    border-color: var(--hdf-component-secondary-border);
    background: var(--hdf-component-secondary-background);
    color: var(--hdf-component-secondary-color);
}

.hdf-button--secondary:hover,
.hdf-site-main .is-style-outline > .wp-block-button__link:hover {
    border-color: var(--hdf-color-primary-hover);
    background: var(--hdf-color-surface-muted);
    color: var(--hdf-color-primary-hover);
}

.hdf-site-main :where(input:not([type="checkbox"], [type="radio"], [type="submit"], [type="button"], [type="reset"]), select, textarea) {
    min-height: var(--hdf-component-control-height);
    max-width: 100%;
    padding: var(--hdf-spacing-2) var(--hdf-spacing-3);
    border: var(--hdf-border-width-default) solid var(--hdf-component-field-border);
    border-radius: var(--hdf-component-form-radius);
    background: var(--hdf-component-field-background);
    color: var(--hdf-color-text-primary);
    transition:
        border-color var(--hdf-motion-duration-fast) var(--hdf-motion-easing-standard),
        box-shadow var(--hdf-motion-duration-fast) var(--hdf-motion-easing-standard);
}

.hdf-site-main :where(input:not([type="checkbox"], [type="radio"], [type="submit"], [type="button"], [type="reset"]), select, textarea):focus {
    border-color: var(--hdf-component-field-focus-border);
    outline: 0;
    box-shadow: var(--hdf-component-field-focus-ring);
}

.hdf-site-main label {
    color: var(--hdf-color-text-primary);
    font-weight: var(--hdf-component-label-weight);
}

.hdf-field-help,
.hdf-form-description,
.hdf-site-main .comment-notes,
.hdf-site-main .logged-in-as {
    color: var(--hdf-color-text-muted);
    font-size: var(--hdf-component-help-text-size);
}

.hdf-content-list {
    gap: var(--hdf-component-gap);
}

.hdf-section + .hdf-section {
    margin-block-start: var(--hdf-section-gap);
}

:where(.hdf-entry, .hdf-empty-state, .hdf-card) {
    padding: var(--hdf-component-card-padding);
}

:where(.hdf-entry, .hdf-empty-state, .hdf-blog-card, .hdf-search-result, .hdf-page-surface, .hdf-card) {
    border-color: var(--hdf-component-card-border);
    background: var(--hdf-component-card-background);
    box-shadow: var(--hdf-component-card-default-shadow);
}

:where(.hdf-card, .hdf-blog-card, .hdf-search-result) {
    transition:
        border-color var(--hdf-motion-duration-normal) var(--hdf-motion-easing-standard),
        box-shadow var(--hdf-motion-duration-normal) var(--hdf-motion-easing-standard),
        transform var(--hdf-motion-duration-normal) var(--hdf-motion-easing-standard);
}

:where(.hdf-card, .hdf-blog-card, .hdf-search-result):hover {
    border-color: var(--hdf-component-card-hover-border);
    box-shadow: var(--hdf-component-card-hover-shadow);
    transform: var(--hdf-component-card-hover-transform);
}

:where(.hdf-header-action__widget, .hdf-header-utility__widget, .hdf-primary-menu .sub-menu) {
    border-radius: var(--hdf-component-dropdown-radius);
    box-shadow: var(--hdf-component-dropdown-shadow);
}

:where(.hdf-header-action__widget, .hdf-header-utility__widget) > * + * {
    border-top: var(--hdf-component-dropdown-divider-width) solid var(--hdf-color-border);
}

.hdf-notice {
    padding: var(--hdf-spacing-4);
    border: var(--hdf-border-width-default) solid var(--hdf-color-border);
    border-radius: var(--hdf-radius-md);
}

.hdf-design-notice-soft .hdf-notice {
    background: var(--hdf-color-surface-muted);
}

.hdf-design-notice-solid .hdf-notice {
    border-color: var(--hdf-color-primary-strong);
    background: var(--hdf-color-primary-strong);
    color: var(--hdf-color-on-primary-strong);
}

.hdf-empty-state {
    border-color: var(--hdf-component-empty-state-border);
    background: var(--hdf-component-empty-state-background);
}

.page-numbers {
    border-radius: var(--hdf-component-pagination-radius);
}

.hdf-site-header :where(a, button):focus-visible,
.hdf-site-footer :where(a, button):focus-visible,
.hdf-site-main :where(a, button):focus-visible {
    text-decoration: var(--hdf-component-navigation-focus-underline);
    box-shadow: var(--hdf-component-navigation-focus-shadow);
}

.hdf-site-main :where(.hdf-entry__content, .hdf-page-content, .hdf-blog-content) img:not(.avatar) {
    border-radius: var(--hdf-component-media-radius);
}

@media (prefers-reduced-motion: reduce) {
    .hdf-site * {
        scroll-behavior: auto;
        transition-duration: var(--hdf-motion-reduced-duration) !important;
        animation-duration: var(--hdf-motion-reduced-duration) !important;
        animation-iteration-count: 1 !important;
    }

    .hdf-site :where(.hdf-card, .hdf-blog-card, .hdf-search-result, .hdf-button, .wp-element-button) {
        transform: none !important;
    }
}