/**
 * File: assets/css/frontend/design-system/primitives.css
 * Purpose: Publishes the reusable Theme DNA primitives consumed by theme and companion-plugin components.
 * Scope: Generic visual language only; no commerce or feature business logic.
 * Related PHP: src/Frontend/DesignSystem/DesignSystemPresentation.php
 * Related CSS: assets/css/foundation/tokens.css, assets/css/frontend/design-system/system.css
 * Package: HyperDAF Pro
 */


:root {
    --hdf-color-action: var(--hdf-color-primary-strong);
    --hdf-color-text: var(--hdf-color-text-primary);
    --hdf-color-page: var(--hdf-component-page-canvas-background);
    --hdf-color-page-intro: var(--hdf-component-page-intro-background);
    --hdf-color-panel: var(--hdf-component-panel-background);
    --hdf-radius-card: var(--hdf-component-card-radius);
    --hdf-radius-panel: var(--hdf-component-panel-radius);
    --hdf-layout-commerce: var(--hdf-layout-commerce-wide);
}

:where(.hdf-dna-page) {
    min-height: 70vh;
    background: var(--hdf-component-page-canvas-background);
    color: var(--hdf-color-text-primary);
    font-family: var(--hdf-typography-family-sans);
    font-size: var(--hdf-type-role-body-size);
    line-height: var(--hdf-type-role-body-line);
}

:where(.hdf-dna-container) {
    width: min(var(--hdf-layout-wide), calc(100% - (2 * var(--hdf-grid-gutter-desktop))));
    margin-inline: auto;
}

:where(.hdf-dna-container--commerce) {
    width: min(var(--hdf-layout-commerce-wide), calc(100% - (2 * var(--hdf-grid-gutter-desktop))));
}

:where(.hdf-dna-intro) {
    border-block: var(--hdf-border-width-default) solid var(--hdf-component-page-intro-border);
    background: var(--hdf-component-page-intro-background);
}

:where(.hdf-dna-intro__inner) {
    padding-block: var(--hdf-component-page-intro-padding-block);
}

:where(.hdf-dna-body) {
    padding-block: var(--hdf-component-page-body-padding-block-start) var(--hdf-component-page-body-padding-block-end);
}

:where(.hdf-dna-panel, .hdf-dna-card) {
    border: var(--hdf-border-width-default) solid var(--hdf-component-panel-border);
    border-radius: var(--hdf-component-panel-radius);
    background: var(--hdf-component-panel-background);
    box-shadow: var(--hdf-component-card-default-shadow);
}

:where(.hdf-dna-card) {
    padding: var(--hdf-component-card-padding);
}

:where(.hdf-dna-document) {
    padding: var(--hdf-component-document-padding);
    border: var(--hdf-border-width-default) solid var(--hdf-component-panel-border);
    border-radius: var(--hdf-component-card-radius);
    background: var(--hdf-component-document-background);
}

:where(.hdf-dna-title) {
    margin: 0;
    color: var(--hdf-color-text-primary);
    font-family: var(--hdf-typography-family-heading, var(--hdf-typography-family-sans));
    font-weight: var(--hdf-typography-weight-heading, var(--hdf-typography-weight-bold));
    letter-spacing: var(--hdf-typography-letter-spacing-tight);
    line-height: var(--hdf-typography-line-height-tight);
}

:where(.hdf-dna-copy) {
    color: var(--hdf-color-text-tertiary);
    line-height: var(--hdf-typography-line-height-relaxed);
}

:where(.hdf-dna-meta) {
    display: flex;
    flex-wrap: wrap;
    gap: var(--hdf-component-meta-gap);
    color: var(--hdf-color-text-muted);
    font-size: var(--hdf-typography-size-sm);
}

:where(.hdf-dna-button) {
    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 transparent;
    border-radius: var(--hdf-component-button-radius);
    font: inherit;
    font-weight: var(--hdf-component-button-weight);
    line-height: 1;
    text-decoration: none;
    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);
}

:where(.hdf-dna-button--primary) {
    border-color: var(--hdf-component-button-primary-background);
    background: var(--hdf-component-button-primary-background);
    color: var(--hdf-component-button-primary-foreground);
}

:where(.hdf-dna-button--primary:hover, .hdf-dna-button--primary:focus-visible) {
    border-color: var(--hdf-component-button-primary-hover);
    background: var(--hdf-component-button-primary-hover);
    color: var(--hdf-component-button-primary-foreground);
}

:where(.hdf-dna-button--secondary) {
    border-color: var(--hdf-color-border);
    background: var(--hdf-color-surface-card);
    color: var(--hdf-color-text-primary);
}

:where(.hdf-dna-button--secondary:hover, .hdf-dna-button--secondary:focus-visible) {
    border-color: var(--hdf-color-border-strong);
    background: var(--hdf-color-surface-hover);
    color: var(--hdf-color-text-primary);
}

:where(.hdf-dna-badge) {
    display: inline-flex;
    min-height: var(--hdf-component-badge-height);
    align-items: center;
    padding-inline: var(--hdf-component-badge-padding-x);
    border: var(--hdf-border-width-default) solid var(--hdf-color-border-subtle);
    border-radius: var(--hdf-component-badge-radius);
    background: var(--hdf-color-surface-muted);
    color: var(--hdf-color-text-secondary);
    font-size: var(--hdf-type-role-badge-size);
    font-weight: var(--hdf-component-label-weight);
    line-height: 1;
}

:where(.hdf-dna-badge--success) {
    border-color: color-mix(in srgb, var(--hdf-color-success) 22%, var(--hdf-color-border-subtle));
    background: var(--hdf-color-success-soft);
    color: var(--hdf-color-success-text);
}

:where(.hdf-dna-badge--info) {
    border-color: color-mix(in srgb, var(--hdf-color-info-text) 22%, var(--hdf-color-border-subtle));
    background: var(--hdf-color-info-soft);
    color: var(--hdf-color-info-text);
}

:where(.hdf-dna-field) {
    min-height: var(--hdf-component-control-height);
    padding-inline: 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);
    font: inherit;
}

:where(.hdf-dna-field:focus) {
    border-color: var(--hdf-component-field-focus-border);
    outline: 0;
    box-shadow: var(--hdf-component-field-focus-ring);
}

:where(.hdf-dna-table) {
    width: 100%;
    border-collapse: collapse;
    border: var(--hdf-border-width-default) solid var(--hdf-component-table-border);
    background: var(--hdf-color-surface-card);
}

:where(.hdf-dna-table th, .hdf-dna-table td) {
    min-height: var(--hdf-component-table-row-height);
    padding: var(--hdf-spacing-3);
    border: var(--hdf-border-width-default) solid var(--hdf-component-table-border);
    text-align: start;
}

:where(.hdf-dna-table th) {
    background: var(--hdf-component-table-header-background);
    color: var(--hdf-color-text-secondary);
    font-weight: var(--hdf-component-label-weight);
}

@media (max-width: 64rem) {
    :where(.hdf-dna-container, .hdf-dna-container--commerce) {
        width: min(100% - (2 * var(--hdf-grid-gutter-tablet)), var(--hdf-layout-commerce-wide));
    }
}

@media (max-width: 48rem) {
    :where(.hdf-dna-container, .hdf-dna-container--commerce) {
        width: min(100% - (2 * var(--hdf-grid-gutter-mobile)), var(--hdf-layout-commerce-wide));
    }
}