@layer components {
    /* Hero Panel Layout */
    .c-hero {
        padding: var(--spacing-16) 0 var(--spacing-12) 0;
        background: linear-gradient(135deg, hsl(var(--hue-primary), 60%, 15%) 0%, hsl(var(--hue-secondary), 60%, 10%) 100%);
        color: var(--color-text-light);
        text-align: center;
        border-bottom: 1px solid var(--color-bg-border);
    }

    .c-hero-inner {
        max-width: 800px;
        margin: 0 auto;
        padding: 0 var(--spacing-6);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--spacing-4);
    }

    .c-hero-badge {
        background-color: var(--color-primary);
        color: var(--color-text-light);
        font-size: var(--font-size-sm);
        font-weight: var(--font-weight-bold);
        padding: var(--spacing-1) var(--spacing-3);
        border-radius: 50px;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    .c-hero-title {
        font-size: clamp(2rem, 5vw, 3.5rem);
        font-weight: var(--font-weight-bold);
        color: var(--color-text-light);
        line-height: var(--line-height-tight);
        margin: 0;
    }

    .c-hero-author {
        font-size: var(--font-size-base);
        font-weight: var(--font-weight-medium);
        color: hsl(var(--hue-primary), 20%, 80%);
    }

    .c-hero-desc {
        font-size: var(--font-size-lg);
        color: hsl(var(--hue-primary), 15%, 85%);
        line-height: var(--line-height-base);
        max-width: 60ch;
        margin: 0;
    }

    /* Section Headings */
    .c-home-section {
        padding: var(--spacing-12) 0;
        max-width: 1200px;
        margin: 0 auto;
        padding-left: var(--spacing-6);
        padding-right: var(--spacing-6);
    }

    .c-section-header {
        margin-bottom: var(--spacing-8);
        border-bottom: 1px solid var(--color-bg-border);
        padding-bottom: var(--spacing-3);
    }

    .c-section-title {
        font-size: var(--font-size-2xl);
        font-weight: var(--font-weight-bold);
        margin: 0;
    }

    /* Statistics Dashboard Grid */
    .c-stats-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: var(--spacing-6);
        margin-bottom: var(--spacing-8);
    }

    .c-stat-card {
        background-color: var(--color-bg-surface);
        border: 1px solid var(--color-bg-border);
        border-radius: var(--radius-md);
        padding: var(--spacing-6);
        text-align: center;
        box-shadow: var(--shadow-sm);
        transition: var(--transition-base);
    }

    .c-stat-card:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-md);
    }

    .c-stat-val {
        font-size: var(--font-size-3xl);
        font-weight: var(--font-weight-bold);
        color: var(--color-primary);
        line-height: var(--line-height-tight);
        margin-bottom: var(--spacing-2);
    }

    .c-stat-lbl {
        font-size: var(--font-size-sm);
        font-weight: var(--font-weight-semibold);
        color: var(--color-text-muted);
    }

    /* Unit Cards Grid Layout */
    .c-units-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: var(--spacing-6);
    }

    .c-unit-card {
        background-color: var(--color-bg-base);
        border: 1px solid var(--color-bg-border);
        border-radius: var(--radius-lg);
        padding: var(--spacing-6);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        box-shadow: var(--shadow-sm);
        transition: var(--transition-base);
    }

    .c-unit-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow-lg);
        border-color: var(--color-primary);
    }

    .c-unit-badge {
        align-self: flex-start;
        background-color: var(--color-success-light);
        color: var(--color-success);
        font-size: var(--font-size-sm);
        font-weight: var(--font-weight-bold);
        padding: var(--spacing-1) var(--spacing-3);
        border-radius: var(--radius-sm);
        margin-bottom: var(--spacing-3);
    }

    .c-unit-title {
        font-size: var(--font-size-lg);
        font-weight: var(--font-weight-bold);
        margin-bottom: var(--spacing-2);
    }

    .c-unit-desc {
        font-size: var(--font-size-sm);
        color: var(--color-text-muted);
        margin-bottom: var(--spacing-4);
        flex-grow: 1;
    }

    .c-unit-meta {
        font-size: var(--font-size-sm);
        font-weight: var(--font-weight-medium);
        color: var(--color-text-muted);
        display: flex;
        justify-content: space-between;
        margin-bottom: var(--spacing-4);
        border-top: 1px solid var(--color-bg-border);
        padding-top: var(--spacing-3);
    }

    .c-unit-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background-color: var(--color-primary);
        color: var(--color-text-light);
        font-size: var(--font-size-sm);
        font-weight: var(--font-weight-semibold);
        padding: var(--spacing-3);
        border-radius: var(--radius-md);
        text-align: center;
        transition: var(--transition-base);
    }

    .c-unit-btn:hover {
        background-color: var(--color-primary-hover);
        color: var(--color-text-light);
        text-decoration: none;
    }

    /* Quick Access & Buttons list */
    .c-quick-links-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: var(--spacing-4);
    }

    .c-btn-quick {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: var(--spacing-2);
        background-color: var(--color-bg-surface);
        border: 1px solid var(--color-bg-border);
        border-radius: var(--radius-md);
        padding: var(--spacing-4);
        font-weight: var(--font-weight-semibold);
        color: var(--color-text-main);
        box-shadow: var(--shadow-sm);
        transition: var(--transition-base);
    }

    .c-btn-quick:hover {
        background-color: var(--color-primary-light);
        color: var(--color-primary);
        border-color: var(--color-primary);
        text-decoration: none;
    }

    /* Repo Metadata Panel */
    .c-repo-panel {
        background-color: var(--color-bg-surface);
        border: 1px solid var(--color-bg-border);
        border-radius: var(--radius-lg);
        padding: var(--spacing-6);
    }

    .c-repo-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: var(--spacing-4);
    }

    .c-repo-item {
        display: flex;
        justify-content: space-between;
        font-size: var(--font-size-sm);
        border-bottom: 1px solid var(--color-bg-border);
        padding: var(--spacing-2) 0;
    }

    .c-repo-lbl {
        color: var(--color-text-muted);
        font-weight: var(--font-weight-medium);
    }

    .c-repo-val {
        color: var(--color-text-main);
        font-weight: var(--font-weight-bold);
    }

    /* Dark Mode toggle transition */
    [data-theme="dark"] .c-hero {
        background: linear-gradient(135deg, hsl(var(--hue-primary), 40%, 10%) 0%, hsl(var(--hue-secondary), 40%, 5%) 100%);
    }
}