@layer components {

    /* ===== Base ===== */
    .page-header {
        @apply w-full;
    }

    .page-header-inner {
        @apply flex flex-col gap-4;
    }

    .page-header-top {
        @apply flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between;
    }

    .page-header-main {
        @apply min-w-0;
    }

    .page-header-title {
        @apply text-2xl font-semibold tracking-tight text-slate-900 sm:text-3xl;
    }

    .page-header-subtitle {
        @apply mt-1 text-sm text-slate-600 sm:text-base;
    }

    .page-header-actions {
        @apply flex shrink-0 flex-wrap items-center gap-2;
    }

    .page-header-meta {
        @apply flex flex-wrap items-center gap-x-4 gap-y-2 text-sm text-slate-600;
    }

    /* ===== Breadcrumbs ===== */
    .breadcrumbs {
        @apply flex flex-wrap items-center gap-2 text-sm text-slate-600;
    }

    .breadcrumbs a {
        @apply font-medium text-slate-700 hover:text-slate-900;
    }

    .breadcrumbs-sep {
        @apply text-slate-400;
    }

    /* ===== Tabs ===== */
    .header-tabs {
        @apply flex flex-wrap gap-2 border-b border-slate-200;
    }

    .header-tab {
        @apply -mb-px inline-flex items-center justify-center rounded-t-xl px-3 py-2 text-sm font-semibold text-slate-600 hover:text-slate-900;
    }

    .header-tab-active {
        @apply border-b-2 border-slate-900 text-slate-900;
    }

    /* ===== Variants ===== */
    .page-header-compact .page-header-title {
        @apply text-xl sm:text-2xl;
    }

    .page-header-card {
        @apply rounded-3xl border border-slate-200 bg-white p-6 shadow-sm;
    }

    .page-header-hero {
        @apply rounded-3xl border border-slate-200 bg-white p-8 shadow-sm;
    }

    /* ===== Tones ===== */
    .page-header-soft {
        @apply bg-slate-50;
    }

    .page-header-dark {
        @apply border-slate-800 bg-slate-900;
    }

    .page-header-dark .page-header-title {
        @apply text-white;
    }

    .page-header-dark .page-header-subtitle {
        @apply text-white/70;
    }

    .page-header-dark .page-header-meta {
        @apply text-white/70;
    }

    .page-header-dark .breadcrumbs {
        @apply text-white/70;
    }

    .page-header-dark .breadcrumbs a {
        @apply text-white hover:text-white/90;
    }

    .page-header-dark .header-tabs {
        @apply border-white/15;
    }

    .page-header-dark .header-tab {
        @apply text-white/70 hover:text-white;
    }

    .page-header-dark .header-tab-active {
        @apply border-white text-white;
    }

    /* ===== Alignment ===== */
    .page-header-center .page-header-top {
        @apply sm:justify-center;
    }

    .page-header-center .page-header-actions {
        @apply sm:justify-center;
    }

    .page-header-center .page-header-main {
        @apply sm:text-center;
    }

    .page-header-center .breadcrumbs {
        @apply sm:justify-center;
    }

    .page-header-center .page-header-meta {
        @apply sm:justify-center;
    }

    /* ===== Divider ===== */
    .page-header-divider {
        @apply border-t border-slate-200;
    }

    .page-header-dark .page-header-divider {
        @apply border-white/15;
    }
}