/* core.css - Layout Stacks & Backgrounds */

/* 1. Base Stacks */
.horizontal-stack,
.child-horizontal-stack > *,
.grandchild-horizontal-stack > * > * {
    display: flex;
    flex-direction: row;
}

.vertical-stack,
.child-vertical-stack > *,
.grandchild-vertical-stack > * > * {
    display: flex;
    flex-direction: column;
}

.layer-stack {
    display: grid;
    grid-template-areas: "stack";
    align-items: center;
    justify-items: center;
}

.layer-stack > * {
    grid-area: stack;
}

/* 2. Adaptive Stack Defaults (Mobile First) */
.horizontal-level-1, .child-horizontal-level-1 > *, .grandchild-horizontal-level-1 > * > *,
.horizontal-level-2, .child-horizontal-level-2 > *, .grandchild-horizontal-level-2 > * > *,
.horizontal-level-3, .child-horizontal-level-3 > *, .grandchild-horizontal-level-3 > * > *,
.horizontal-level-4, .child-horizontal-level-4 > *, .grandchild-horizontal-level-4 > * > *,
.horizontal-level-5, .child-horizontal-level-5 > *, .grandchild-horizontal-level-5 > * > * {
    display: flex;
    flex-direction: column;
}

.vertical-level-1, .child-vertical-level-1 > *, .grandchild-vertical-level-1 > * > *,
.vertical-level-2, .child-vertical-level-2 > *, .grandchild-vertical-level-2 > * > *,
.vertical-level-3, .child-vertical-level-3 > *, .grandchild-vertical-level-3 > * > *,
.vertical-level-4, .child-vertical-level-4 > *, .grandchild-vertical-level-4 > * > *,
.vertical-level-5, .child-vertical-level-5 > *, .grandchild-vertical-level-5 > * > * {
    display: flex;
    flex-direction: row;
}

/* 3. Utilities (Alignment, Sizing, Tokens) */
.align-items-center, .child-align-items-center > *, .grandchild-align-items-center > * > * { align-items: center; }
.align-items-start, .child-align-items-start > *, .grandchild-align-items-start > * > * { align-items: flex-start; }
.align-items-end, .child-align-items-end > *, .grandchild-align-items-end > * > * { align-items: flex-end; }
.align-items-stretch, .child-align-items-stretch > *, .grandchild-align-items-stretch > * > * { align-items: stretch; }

.width-full { width: 100%; }
.height-full { min-height: 100%; }
.flex-grow, .child-flex-grow > *, .grandchild-flex-grow > * > * { flex-grow: 1; }
.flex-shrink-0 { flex-shrink: 0; }
.pointer { cursor: pointer; }

.width-level-1 { width: var(--width-level-1); }
.width-level-2 { width: var(--width-level-2); }
.width-level-3 { width: var(--width-level-3); }
.width-level-4 { width: var(--width-level-4); }
.width-level-5 { width: var(--width-level-5); }

.padding-level-1, .child-padding-level-1 > *, .grandchild-padding-level-1 > * > * { padding: var(--spacing-level-1); }
.padding-level-2, .child-padding-level-2 > *, .grandchild-padding-level-2 > * > * { padding: var(--spacing-level-2); }
.padding-level-3, .child-padding-level-3 > *, .grandchild-padding-level-3 > * > * { padding: var(--spacing-level-3); }
.padding-level-4, .child-padding-level-4 > *, .grandchild-padding-level-4 > * > * { padding: var(--spacing-level-4); }
.padding-level-5, .child-padding-level-5 > *, .grandchild-padding-level-5 > * > * { padding: var(--spacing-level-5); }

.margin-level-1, .child-margin-level-1 > *, .grandchild-margin-level-1 > * > * { margin: var(--spacing-level-1); }
.margin-level-2, .child-margin-level-2 > *, .grandchild-margin-level-2 > * > * { margin: var(--spacing-level-2); }
.margin-level-3, .child-margin-level-3 > *, .grandchild-margin-level-3 > * > * { margin: var(--spacing-level-3); }
.margin-level-4, .child-margin-level-4 > *, .grandchild-margin-level-4 > * > * { margin: var(--spacing-level-4); }
.margin-level-5, .child-margin-level-5 > *, .grandchild-margin-level-5 > * > * { margin: var(--spacing-level-5); }

.corner-level-1, .child-corner-level-1 > *, .grandchild-corner-level-1 > * > * { border-radius: var(--border-radius-level-1); }
.corner-level-2, .child-corner-level-2 > *, .grandchild-corner-level-2 > * > * { border-radius: var(--border-radius-level-2); }
.corner-level-3, .child-corner-level-3 > *, .grandchild-corner-level-3 > * > * { border-radius: var(--border-radius-level-3); }

.text-level-1, .child-text-level-1 > *, .grandchild-text-level-1 > * > * { font-size: var(--text-level-1); }
.text-level-2, .child-text-level-2 > *, .grandchild-text-level-2 > * > * { font-size: var(--text-level-2); }
.text-level-3, .child-text-level-3 > *, .grandchild-text-level-3 > * > * { font-size: var(--text-level-3); }
.text-level-4, .child-text-level-4 > *, .grandchild-text-level-4 > * > * { font-size: var(--text-level-4); }
.text-level-5, .child-text-level-5 > *, .grandchild-text-level-5 > * > * { font-size: var(--text-level-5); }
.text-weight-bold { font-weight: bold; }

.background-level-1, .child-background-level-1 > *, .grandchild-background-level-1 > * > * { background-color: var(--background-level-1); color: var(--text-color); --background-current: var(--background-level-1); }
.background-level-2, .child-background-level-2 > *, .grandchild-background-level-2 > * > * { background-color: var(--background-level-2); color: var(--text-color); --background-current: var(--background-level-2); }
.background-level-3, .child-background-level-3 > *, .grandchild-background-level-3 > * > * { background-color: var(--background-level-3); color: var(--text-color); --background-current: var(--background-level-3); }
.background-level-4, .child-background-level-4 > *, .grandchild-background-level-4 > * > * { background-color: var(--background-level-4); color: var(--text-color); --background-current: var(--background-level-4); }
.background-level-5, .child-background-level-5 > *, .grandchild-background-level-5 > * > * { background-color: var(--background-level-5); color: var(--text-color); --background-current: var(--background-level-5); }

/* 4. Grid Defaults */
.grid-level-1, .child-grid-level-1 > *, .grandchild-grid-level-1 > * > *,
.grid-level-2, .child-grid-level-2 > *, .grandchild-grid-level-2 > * > *,
.grid-level-3, .child-grid-level-3 > *, .grandchild-grid-level-3 > * > *,
.grid-level-4, .child-grid-level-4 > *, .grandchild-grid-level-4 > * > *,
.grid-level-5, .child-grid-level-5 > *, .grandchild-grid-level-5 > * > * {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

/* 5. Design Level 1 - Watch (200px) */
@media (min-width: 200px) {
    .horizontal-level-1, .child-horizontal-level-1 > *, .grandchild-horizontal-level-1 > * > * { flex-direction: row; }
    .vertical-level-1, .child-vertical-level-1 > *, .grandchild-vertical-level-1 > * > * { flex-direction: column; }
}

/* 6. Design Level 2 - Mobile Vertical (320px) */
@media (min-width: 320px) {
    .horizontal-level-2, .child-horizontal-level-2 > *, .grandchild-horizontal-level-2 > * > * { flex-direction: row; }
    .vertical-level-2, .child-vertical-level-2 > *, .grandchild-vertical-level-2 > * > * { flex-direction: column; }
    .hide-above-level-1, .child-hide-above-level-1 > *, .grandchild-hide-above-level-1 > * > * { display: none !important; }
    .grid-level-1, .child-grid-level-1 > *, .grandchild-grid-level-1 > * > * { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 7. Design Level 3 - Mobile Horizontal / Tablet Vertical (480px) */
@media (min-width: 480px) {
    .horizontal-level-3, .child-horizontal-level-3 > *, .grandchild-horizontal-level-3 > * > * { flex-direction: row; }
    .vertical-level-3, .child-vertical-level-3 > *, .grandchild-vertical-level-3 > * > * { flex-direction: column; }
    .width-level-1-above-level-2 { width: var(--width-level-1); }
    .hide-above-level-2, .child-hide-above-level-2 > *, .grandchild-hide-above-level-2 > * > * { display: none !important; }
    .grid-level-1, .child-grid-level-1 > *, .grandchild-grid-level-1 > * > * { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .grid-level-2, .child-grid-level-2 > *, .grandchild-grid-level-2 > * > * { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 8. Design Level 4 - Tablet Horizontal / Laptop (768px) */
@media (min-width: 768px) {
    .horizontal-level-4, .child-horizontal-level-4 > *, .grandchild-horizontal-level-4 > * > * { flex-direction: row; }
    .vertical-level-4, .child-vertical-level-4 > *, .grandchild-vertical-level-4 > * > * { flex-direction: column; }
    .width-level-1-above-level-3 { width: var(--width-level-1); }
    .width-level-2-above-level-3 { width: var(--width-level-2); }
    .hide-above-level-3, .child-hide-above-level-3 > *, .grandchild-hide-above-level-3 > * > * { display: none !important; }
    .grid-level-1, .child-grid-level-1 > *, .grandchild-grid-level-1 > * > * { grid-template-columns: repeat(8, minmax(0, 1fr)); }
    .grid-level-2, .child-grid-level-2 > *, .grandchild-grid-level-2 > * > * { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .grid-level-3, .child-grid-level-3 > *, .grandchild-grid-level-3 > * > * { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 9. Design Level 5 - Desktop / 4K (1440px) */
@media (min-width: 1440px) {
    .horizontal-level-5, .child-horizontal-level-5 > *, .grandchild-horizontal-level-5 > * > * { flex-direction: row; }
    .vertical-level-5, .child-vertical-level-5 > *, .grandchild-vertical-level-5 > * > * { flex-direction: column; }
    .width-level-1-above-level-4 { width: var(--width-level-1); }
    .width-level-2-above-level-4 { width: var(--width-level-2); }
    .hide-above-level-4, .child-hide-above-level-4 > *, .grandchild-hide-above-level-4 > * > * { display: none !important; }
    .grid-level-1, .child-grid-level-1 > *, .grandchild-grid-level-1 > * > * { grid-template-columns: repeat(16, minmax(0, 1fr)); }
    .grid-level-2, .child-grid-level-2 > *, .grandchild-grid-level-2 > * > * { grid-template-columns: repeat(8, minmax(0, 1fr)); }
    .grid-level-3, .child-grid-level-3 > *, .grandchild-grid-level-3 > * > * { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .grid-level-4, .child-grid-level-4 > *, .grandchild-grid-level-4 > * > * { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 10. Range / Max-Width Specific Utilities */
@media (max-width: 319.98px) {
    .hide-level-1, .child-hide-level-1 > *, .grandchild-hide-level-1 > * > * { display: none !important; }
    .hide-below-level-2, .child-hide-below-level-2 > *, .grandchild-hide-below-level-2 > * > * { display: none !important; }
}

@media (min-width: 320px) and (max-width: 479.98px) {
    .hide-level-2, .child-hide-level-2 > *, .grandchild-hide-level-2 > * > * { display: none !important; }
}

@media (max-width: 479.98px) {
    .hide-below-level-3, .child-hide-below-level-3 > *, .grandchild-hide-below-level-3 > * > * { display: none !important; }
}

@media (min-width: 480px) and (max-width: 767.98px) {
    .hide-level-3, .child-hide-level-3 > *, .grandchild-hide-level-3 > * > * { display: none !important; }
}

@media (max-width: 767.98px) {
    .hide-below-level-4, .child-hide-below-level-4 > *, .grandchild-hide-below-level-4 > * > * { display: none !important; }
}

@media (min-width: 768px) and (max-width: 1439.98px) {
    .width-level-1-at-level-4 { width: var(--width-level-1); }
    .hide-level-4, .child-hide-level-4 > *, .grandchild-hide-level-4 > * > * { display: none !important; }
}

@media (max-width: 1439.98px) {
    .hide-below-level-5, .child-hide-below-level-5 > *, .grandchild-hide-below-level-5 > * > * { display: none !important; }
}

@media (min-width: 1440px) {
    .hide-level-5, .child-hide-level-5 > *, .grandchild-hide-level-5 > * > * { display: none !important; }
}