@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    /*
     * Token Contract
     * - Semantic tokens are defined once and consumed via td-* primitives.
     * - Public scope: body.theme-public
     * - Admin scope: body.theme-admin
     */
    :root {
        /* Brand */
        --td-brand-wood: #3d2b1f;
        --td-brand-forest: #2d4a3e;
        --td-brand-forest-hover: #3d6b5a;
        --td-brand-sand: #d4c5a9;
        --td-brand-orange: #c0703a;

        /* Semantic colors */
        --td-bg: #ffffff;
        --td-bg-alt: #f8f7f3;
        --td-surface: #ffffff;
        --td-surface-elevated: #ffffff;
        --td-surface-muted: #f3f4f6;
        --td-text: #1f2937;
        --td-text-muted: #4b5563;
        --td-text-inverse: #ffffff;
        --td-heading-color: #3d2b1f;
        --td-border: #d1d5db;
        --td-border-strong: #9ca3af;

        /* Action */
        --td-action-bg: #2d4a3e;
        --td-action-bg-hover: #3d6b5a;
        --td-action-fg: #ffffff;
        --td-action-bg-disabled: #b6c5be;
        --td-action-fg-disabled: #f5f7f6;
        --td-action-soft: #eaf1ee;
        --td-action-ring: rgba(45, 74, 62, 0.42);

        /* States */
        --td-state-success-bg: #f0fdf4;
        --td-state-success-border: #bbf7d0;
        --td-state-success-text: #166534;
        --td-state-warning-bg: #fffbeb;
        --td-state-warning-border: #fde68a;
        --td-state-warning-text: #92400e;
        --td-state-danger-bg: #fef2f2;
        --td-state-danger-border: #fecaca;
        --td-state-danger-text: #b91c1c;
        --td-state-info-bg: #eff6ff;
        --td-state-info-border: #bfdbfe;
        --td-state-info-text: #1d4ed8;

        /* Typography */
        --td-font-family-ui: Inter, system-ui, -apple-system, Segoe UI, sans-serif;
        --td-font-family-heading: Merriweather, Georgia, Cambria, Times New Roman, serif;
        --td-font-family-sans: var(--td-font-family-ui);
        --td-font-size-display: clamp(2.125rem, 1.65rem + 1.9vw, 3.5rem);
        --td-font-size-h1: clamp(1.875rem, 1.55rem + 1.3vw, 2.75rem);
        --td-font-size-h2: clamp(1.5rem, 1.3rem + 0.85vw, 2.125rem);
        --td-font-size-h3: clamp(1.25rem, 1.12rem + 0.52vw, 1.625rem);
        --td-font-size-h4: clamp(1.0625rem, 1.02rem + 0.22vw, 1.25rem);
        --td-font-size-lead: clamp(1.0625rem, 1rem + 0.25vw, 1.25rem);
        --td-font-size-body-lg: 1.125rem;
        --td-font-size-body: 1rem;
        --td-font-size-body-sm: 0.875rem;
        --td-font-size-caption: clamp(0.72rem, 0.7rem + 0.08vw, 0.79rem);
        --td-font-size-label: clamp(0.72rem, 0.7rem + 0.08vw, 0.79rem);
        --td-line-tight: 1.2;
        --td-line-heading: 1.16;
        --td-line-heading-tight: 1.06;
        --td-line-copy: 1.6;
        --td-line-copy-loose: 1.72;
        --td-letter-label: 0.03em;
        --td-measure: 66ch;
        --td-measure-wide: 74ch;

        /* Spacing */
        --td-space-1: 0.25rem;
        --td-space-2: 0.5rem;
        --td-space-3: 0.75rem;
        --td-space-4: 1rem;
        --td-space-5: 1.25rem;
        --td-space-6: 1.5rem;
        --td-space-8: 2rem;
        --td-space-10: 2.5rem;
        --td-space-12: 3rem;
        --td-space-16: 4rem;
        --td-section-sm: 2.5rem;
        --td-section-md: 3.5rem;
        --td-section-lg: 5rem;
        --td-touch-target-min: 44px;

        /* Radius */
        --td-radius-xs: 0.375rem;
        --td-radius-sm: 0.5rem;
        --td-radius-md: 0.75rem;
        --td-radius-lg: 1rem;
        --td-radius-xl: 1.25rem;

        /* Shadows */
        --td-shadow-1: 0 1px 3px rgba(17, 24, 39, 0.07);
        --td-shadow-2: 0 6px 18px rgba(17, 24, 39, 0.1);
        --td-shadow-3: 0 14px 30px rgba(17, 24, 39, 0.16);
        --td-shadow-card: 0 2px 8px rgba(17, 24, 39, 0.06);
        --td-shadow-card-hover: 0 12px 24px rgba(17, 24, 39, 0.12);

        /* Motion: single timing/easing table */
        --td-motion-duration-none: 0ms;
        --td-motion-duration-fast: 120ms;
        --td-motion-duration-base: 180ms;
        --td-motion-duration-slow: 260ms;
        --td-motion-duration-overlay: 300ms;
        --td-motion-ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
        --td-motion-ease-emphasized: cubic-bezier(0.22, 1, 0.36, 1);
        --td-motion-ease-linear: linear;
        --default-transition-duration: var(--td-motion-duration-base);
        --default-transition-timing-function: var(--td-motion-ease-standard);

        /* Backward-compatible aliases */
        --td-motion-fast: var(--td-motion-duration-fast);
        --td-motion-base: var(--td-motion-duration-base);
        --td-motion-slow: var(--td-motion-duration-slow);
        --td-ease-standard: var(--td-motion-ease-standard);

        /* Focus */
        --td-focus-outline: #173f32;
        --td-focus-offset: #ffffff;
    }

    .theme-public {
        --td-bg: #ffffff;
        --td-bg-alt: #f8f7f3;
        --td-surface: #ffffff;
        --td-surface-elevated: #ffffff;
        --td-surface-muted: #f3f4f6;
        --td-text: #1f2937;
        --td-text-muted: #4b5563;
        --td-heading-color: #3d2b1f;
        --td-border: #d1d5db;
        --td-border-strong: #9ca3af;
    }

    .theme-admin {
        --td-bg: #f3f4f6;
        --td-bg-alt: #eceff3;
        --td-surface: #ffffff;
        --td-surface-elevated: #ffffff;
        --td-surface-muted: #eef1f5;
        --td-text: #1f2937;
        --td-text-muted: #374151;
        --td-heading-color: #2a1d15;
        --td-border: #cfd6df;
        --td-border-strong: #94a3b8;
        --td-shadow-card: 0 2px 6px rgba(15, 23, 42, 0.06);
        --td-shadow-card-hover: 0 10px 22px rgba(15, 23, 42, 0.12);
    }

    html {
        scroll-behavior: smooth;
    }

    body {
        background-color: var(--td-bg);
        color: var(--td-text);
        font-family: var(--td-font-family-ui);
        line-height: var(--td-line-copy);
        @apply antialiased;
    }

    h1,
    h2,
    h3,
    h4 {
        font-family: var(--td-font-family-heading);
        line-height: var(--td-line-heading);
        color: var(--td-heading-color);
        font-weight: 700;
        margin: 0;
        text-wrap: balance;
    }

    h1 {
        font-size: var(--td-font-size-h1);
        line-height: var(--td-line-heading-tight);
        letter-spacing: -0.016em;
    }

    h2 {
        font-size: var(--td-font-size-h2);
        letter-spacing: -0.013em;
    }

    h3 {
        font-size: var(--td-font-size-h3);
        letter-spacing: -0.01em;
    }

    h4 {
        font-size: var(--td-font-size-h4);
        letter-spacing: -0.005em;
        font-weight: 600;
    }

    p,
    ul,
    ol,
    dl,
    blockquote,
    figure {
        margin: 0;
    }

    p {
        text-wrap: pretty;
    }

    :where(main, article, .td-rhythm) :where(h1, h2, h3, h4, p, ul, ol, dl, blockquote, figure, table) + :where(h1, h2, h3, h4, p, ul, ol, dl, blockquote, figure, table) {
        margin-top: var(--td-space-5);
    }

    :where(main, article, .td-rhythm) :where(p, .td-type-body, .td-type-body-lg, .td-type-lead, .td-copy, .td-muted, blockquote) {
        max-inline-size: var(--td-measure);
    }

    :where(main, article, .td-rhythm) :where(.td-type-body-sm, .td-type-caption, .td-type-label) {
        max-inline-size: 56ch;
    }

    a {
        transition-property: color, background-color, border-color, text-decoration-color;
        transition-duration: var(--td-motion-base);
        transition-timing-function: var(--td-ease-standard);
    }

    :where(a[href], button, input, select, textarea, summary, [role="button"], [tabindex]:not([tabindex="-1"])):focus-visible {
        outline: 2px solid var(--td-focus-offset);
        outline-offset: 2px;
        box-shadow: 0 0 0 4px var(--td-focus-outline);
    }

    button:disabled,
    input:disabled,
    select:disabled,
    textarea:disabled {
        @apply cursor-not-allowed opacity-70;
    }

    #home-carousel {
        touch-action: pan-x;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        overscroll-behavior-y: auto;
        scroll-behavior: auto;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    #home-carousel::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
    }

    @media (min-width: 768px) {
        #home-carousel {
            scroll-behavior: smooth;
        }
    }

    @media (min-width: 1024px) {
        #home-carousel > article {
            width: calc((100% - 3rem) / 4);
        }
    }

    @media (prefers-reduced-motion: reduce) {
        html {
            scroll-behavior: auto;
        }

        *,
        *::before,
        *::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
            scroll-behavior: auto !important;
        }

        #site-header,
        #mobile-menu-panel,
        #mobile-offer-icon,
        #home-carousel {
            transition-duration: 0ms !important;
            transition-delay: 0ms !important;
        }

        .td-card-hover:hover,
        .hover\:-translate-y-1:hover,
        .hover\:-translate-y-0\.5:hover,
        .group:hover .group-hover\:scale-105,
        .group:hover .group-hover\:scale-\[1\.02\] {
            transform: none !important;
        }

        .td-btn.is-loading::after,
        .td-input.is-loading,
        .td-select.is-loading,
        .td-textarea.is-loading {
            animation: none !important;
        }

        .td-accordion-panel,
        .td-accordion-icon,
        [data-faq-panel],
        [data-faq-icon] {
            transition-duration: 0ms !important;
            transition-delay: 0ms !important;
        }
    }

    @media (forced-colors: active) {
        :where(a[href], button, input, select, textarea, summary, [role="button"], [tabindex]:not([tabindex="-1"])):focus-visible {
            outline: 2px solid Highlight;
            box-shadow: none;
        }
    }
}

@layer components {
    /* Layout primitives */
    .td-container {
        @apply max-w-7xl mx-auto px-4 md:px-6;
    }

    .td-section {
        padding-block: var(--td-section-md);
    }

    .td-section-tight {
        padding-block: var(--td-section-sm);
    }

    .td-section-hero {
        padding-block: var(--td-section-lg);
    }

    .td-cq {
        container-type: inline-size;
    }

    @media (min-width: 768px) {
        .td-section {
            padding-block: var(--td-section-lg);
        }

        .td-section-tight {
            padding-block: var(--td-section-md);
        }

        .td-section-hero {
            padding-block: calc(var(--td-section-lg) + var(--td-space-8));
        }
    }

    @supports (container-type: inline-size) {
        .td-cq .td-cq-grid-cards,
        .td-cq.td-cq-grid-cards {
            grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
        }

        .td-cq .td-cq-grid-showcase,
        .td-cq.td-cq-grid-showcase {
            grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
        }

        .td-cq .td-cq-grid-tiles,
        .td-cq.td-cq-grid-tiles {
            grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        }

        .td-cq .td-cq-grid-split,
        .td-cq.td-cq-grid-split {
            grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
        }

        .td-cq .td-cq-grid-sidebar,
        .td-cq.td-cq-grid-sidebar {
            grid-template-columns: minmax(0, 1fr) !important;
        }

        @container (min-width: 38rem) {
            .td-cq .td-cq-grid-cards,
            .td-cq.td-cq-grid-cards {
                grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
            }

            .td-cq .td-cq-grid-showcase,
            .td-cq.td-cq-grid-showcase {
                grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
            }

            .td-cq .td-cq-grid-tiles,
            .td-cq.td-cq-grid-tiles {
                grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
            }
        }

        @container (min-width: 56rem) {
            .td-cq .td-cq-grid-tiles,
            .td-cq.td-cq-grid-tiles {
                grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
            }
        }

        @container (min-width: 64rem) {
            .td-cq .td-cq-grid-split,
            .td-cq.td-cq-grid-split {
                grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
            }

            .td-cq .td-cq-grid-sidebar,
            .td-cq.td-cq-grid-sidebar {
                grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) !important;
            }
        }

        @container (min-width: 66rem) {
            .td-cq .td-cq-grid-cards,
            .td-cq.td-cq-grid-cards {
                grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
            }

            .td-cq .td-cq-grid-showcase,
            .td-cq.td-cq-grid-showcase {
                grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
            }
        }

        @container (min-width: 84rem) {
            .td-cq .td-cq-grid-showcase,
            .td-cq.td-cq-grid-showcase {
                grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
            }

            .td-cq .td-cq-grid-tiles,
            .td-cq.td-cq-grid-tiles {
                grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
            }
        }
    }

    /* Surface primitives */
    .td-card {
        background-color: var(--td-surface);
        border: 1px solid var(--td-border);
        border-radius: var(--td-radius-lg);
        box-shadow: var(--td-shadow-card);
        transition: border-color var(--td-motion-fast) var(--td-ease-standard), box-shadow var(--td-motion-base) var(--td-ease-standard), transform var(--td-motion-base) var(--td-ease-standard);
    }

    .td-card-hover {
        transition: transform var(--td-motion-base) var(--td-ease-standard), box-shadow var(--td-motion-base) var(--td-ease-standard);
        @apply hover:-translate-y-0.5;
    }

    .td-card-hover:hover {
        box-shadow: var(--td-shadow-card-hover);
    }

    .theme-admin .td-card {
        border-color: var(--td-border);
        box-shadow: var(--td-shadow-card);
    }

    .td-card:focus-within {
        border-color: var(--td-action-bg);
        box-shadow: 0 0 0 3px var(--td-action-ring), var(--td-shadow-card);
    }

    .td-card:active {
        transform: translateY(0);
    }

    .td-listing-card {
        background-color: var(--td-surface);
        border: 1px solid var(--td-border);
        border-radius: var(--td-radius-lg);
        overflow: hidden;
        transition: border-color var(--td-motion-fast) var(--td-ease-standard), box-shadow var(--td-motion-base) var(--td-ease-standard), transform var(--td-motion-base) var(--td-ease-standard);
    }

    .td-listing-card:hover {
        box-shadow: var(--td-shadow-card-hover);
        transform: translateY(-2px);
    }

    .td-listing-card:focus-within {
        border-color: var(--td-action-bg);
        box-shadow: 0 0 0 3px var(--td-action-ring), var(--td-shadow-card-hover);
    }

    .td-listing-card-media {
        @apply w-full h-44 bg-cream flex items-center justify-center;
    }

    .td-listing-card-image {
        @apply w-full h-full object-cover;
    }

    .td-listing-card-body {
        padding: var(--td-space-5);
    }

    .td-listing-card-title {
        font-size: var(--td-font-size-body-lg);
        line-height: 1.35;
        font-weight: 600;
        color: var(--td-heading-color);
        transition: color var(--td-motion-base) var(--td-ease-standard);
    }

    .group:hover .td-listing-card-title {
        color: var(--td-action-bg);
    }

    .td-listing-card-meta {
        margin-top: var(--td-space-1);
        font-size: var(--td-font-size-caption);
        line-height: 1.4;
        font-weight: 500;
        color: var(--td-text-muted);
    }

    .td-listing-card-copy {
        margin-top: var(--td-space-2);
        font-size: var(--td-font-size-body-sm);
        line-height: 1.6;
        color: var(--td-text-muted);
    }

    .td-listing-card-actions {
        margin-top: var(--td-space-4);
        display: grid;
        gap: var(--td-space-2);
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
    }

    .td-listing-card-empty-icon {
        @apply w-16 h-16 text-sand-dark/20;
    }

    /* Typography primitives */
    .td-type-display {
        font-size: var(--td-font-size-display);
        line-height: var(--td-line-heading-tight);
        letter-spacing: -0.02em;
        font-family: var(--td-font-family-heading);
        font-weight: 700;
        color: var(--td-heading-color);
        text-wrap: balance;
    }

    .td-type-h1 {
        font-size: var(--td-font-size-h1);
        line-height: var(--td-line-heading-tight);
        letter-spacing: -0.016em;
        font-family: var(--td-font-family-heading);
        font-weight: 700;
        color: var(--td-heading-color);
        text-wrap: balance;
    }

    .td-type-h2 {
        font-size: var(--td-font-size-h2);
        line-height: var(--td-line-heading);
        letter-spacing: -0.013em;
        font-family: var(--td-font-family-heading);
        font-weight: 700;
        color: var(--td-heading-color);
        text-wrap: balance;
    }

    .td-type-h3 {
        font-size: var(--td-font-size-h3);
        line-height: 1.22;
        letter-spacing: -0.01em;
        font-family: var(--td-font-family-heading);
        font-weight: 600;
        color: var(--td-heading-color);
        text-wrap: balance;
    }

    .td-type-h4 {
        font-size: var(--td-font-size-h4);
        line-height: 1.3;
        letter-spacing: -0.005em;
        font-family: var(--td-font-family-heading);
        font-weight: 600;
        color: var(--td-heading-color);
    }

    .td-type-lead {
        font-size: var(--td-font-size-lead);
        line-height: var(--td-line-copy-loose);
        letter-spacing: -0.004em;
        color: var(--td-text);
        max-inline-size: var(--td-measure);
    }

    .td-type-body-lg {
        font-size: var(--td-font-size-body-lg);
        line-height: var(--td-line-copy-loose);
        color: var(--td-text);
    }

    .td-type-body {
        font-size: var(--td-font-size-body);
        line-height: var(--td-line-copy);
        color: var(--td-text);
    }

    .td-type-body-sm {
        font-size: var(--td-font-size-body-sm);
        line-height: 1.5;
        color: var(--td-text-muted);
    }

    .td-type-caption {
        font-size: var(--td-font-size-caption);
        line-height: 1.38;
        letter-spacing: var(--td-letter-label);
        color: var(--td-text-muted);
    }

    .td-type-label {
        font-size: var(--td-font-size-label);
        line-height: 1.38;
        letter-spacing: var(--td-letter-label);
        font-weight: 600;
        color: var(--td-text-muted);
    }

    .td-heading-xl {
        font-size: var(--td-font-size-h1);
        line-height: var(--td-line-heading-tight);
        letter-spacing: -0.016em;
        font-family: var(--td-font-family-heading);
        font-weight: 700;
        color: var(--td-heading-color);
        text-wrap: balance;
    }

    .td-heading-lg {
        font-size: var(--td-font-size-h2);
        line-height: var(--td-line-heading);
        letter-spacing: -0.013em;
        font-family: var(--td-font-family-heading);
        font-weight: 700;
        color: var(--td-heading-color);
        text-wrap: balance;
    }

    .td-copy {
        font-size: var(--td-font-size-body);
        line-height: var(--td-line-copy-loose);
        color: var(--td-text-muted);
        max-inline-size: var(--td-measure);
    }

    /* Controls */
    .td-btn {
        @apply inline-flex items-center justify-center gap-2 text-sm font-semibold select-none;
        padding: var(--td-space-3) var(--td-space-6);
        min-height: var(--td-touch-target-min);
        border-radius: var(--td-radius-lg);
        line-height: 1.2;
        transition: background-color var(--td-motion-base) var(--td-ease-standard), color var(--td-motion-base) var(--td-ease-standard), border-color var(--td-motion-base) var(--td-ease-standard), box-shadow var(--td-motion-base) var(--td-ease-standard), transform var(--td-motion-base) var(--td-ease-standard);
    }

    .td-btn:active {
        transform: translateY(1px);
    }

    .td-btn:focus-visible {
        box-shadow: 0 0 0 3px var(--td-action-ring);
    }

    .td-btn-primary {
        background-color: var(--td-action-bg);
        color: var(--td-action-fg);
        border: 1px solid transparent;
    }

    .td-btn-primary:hover {
        background-color: var(--td-action-bg-hover);
    }

    .td-btn-primary:active {
        background-color: #244034;
    }

    .td-btn-primary:focus-visible {
        box-shadow: 0 0 0 3px var(--td-action-ring);
    }

    .td-btn-secondary {
        border: 1px solid var(--td-action-bg);
        color: var(--td-action-bg);
        background-color: transparent;
    }

    .td-btn-secondary:hover {
        background-color: var(--td-action-soft);
    }

    .td-btn-secondary:active {
        border-color: var(--td-action-bg-hover);
        color: var(--td-action-bg-hover);
    }

    .td-btn-secondary:focus-visible {
        box-shadow: 0 0 0 3px var(--td-action-ring);
    }

    .td-btn-ghost {
        border: 1px solid rgba(255, 255, 255, 0.35);
        color: #ffffff;
        background-color: rgba(255, 255, 255, 0.04);
    }

    .td-btn-ghost:hover {
        background-color: rgba(255, 255, 255, 0.1);
    }

    .td-btn-ghost:active {
        background-color: rgba(255, 255, 255, 0.18);
    }

    /* CTA na ciemnozielonym tle – wymusza czytelny jasny tekst (spójne z home/offer) */
    .td-cta-inverse,
    .td-cta-inverse h1,
    .td-cta-inverse h2,
    .td-cta-inverse h3,
    .td-cta-inverse h4,
    .td-cta-inverse p,
    .td-cta-inverse .td-copy,
    .td-cta-inverse .td-type-body,
    .td-cta-inverse .td-type-lead {
        color: var(--td-text-inverse);
    }
    .td-cta-inverse p {
        color: rgba(255, 255, 255, 0.92);
    }

    .td-btn-danger {
        background-color: #b91c1c;
        color: #ffffff;
        border: 1px solid transparent;
    }

    .td-btn-danger:hover {
        background-color: #991b1b;
    }

    .td-btn-danger:active {
        background-color: #7f1d1d;
    }

    .td-btn-muted {
        background-color: var(--td-surface-muted);
        color: var(--td-text);
        border: 1px solid var(--td-border);
    }

    .td-btn-muted:hover {
        background-color: #e8ebf0;
        border-color: var(--td-border-strong);
    }

    .td-btn-muted:active {
        background-color: #dfe3e8;
    }

    .td-btn-sm {
        padding: var(--td-space-2) var(--td-space-4);
        border-radius: var(--td-radius-md);
        font-size: var(--td-font-size-body-sm);
    }

    .td-btn-lg {
        padding: var(--td-space-4) var(--td-space-8);
        border-radius: var(--td-radius-xl);
        font-size: var(--td-font-size-body);
    }

    .td-btn-block {
        @apply w-full;
    }

    .td-btn:disabled,
    .td-btn[aria-disabled="true"] {
        background-color: var(--td-action-bg-disabled);
        border-color: var(--td-action-bg-disabled);
        color: var(--td-action-fg-disabled);
        transform: none;
        box-shadow: none;
    }

    .td-btn.is-loading {
        pointer-events: none;
        opacity: 0.85;
    }

    .td-btn.is-loading::after {
        content: "";
        width: 0.9rem;
        height: 0.9rem;
        margin-left: var(--td-space-2);
        border: 2px solid rgba(255, 255, 255, 0.6);
        border-top-color: #ffffff;
        border-radius: 9999px;
        animation: td-spin 0.8s linear infinite;
    }

    @keyframes td-spin {
        to {
            transform: rotate(360deg);
        }
    }

    .td-site-nav-link {
        position: relative;
        display: inline-flex;
        align-items: center;
        gap: var(--td-space-2);
        padding: 0.625rem 0.875rem;
        border-radius: 9999px;
        font-size: 0.875rem;
        line-height: 1.2;
        font-weight: 600;
        color: var(--td-text-muted);
        transition: color var(--td-motion-base) var(--td-ease-standard), background-color var(--td-motion-base) var(--td-ease-standard), box-shadow var(--td-motion-base) var(--td-ease-standard);
    }

    .td-site-nav-link::after {
        content: "";
        position: absolute;
        left: 0.875rem;
        right: 0.875rem;
        bottom: 0.32rem;
        height: 2px;
        border-radius: 9999px;
        background-color: var(--td-action-bg);
        transform: scaleX(0);
        transform-origin: center;
        opacity: 0;
        transition: transform var(--td-motion-fast) var(--td-ease-standard), opacity var(--td-motion-fast) var(--td-ease-standard);
    }

    .td-site-nav-link:hover,
    .td-site-nav-link:focus-visible,
    .td-site-nav-link[aria-expanded="true"],
    .td-site-nav-link--active {
        color: var(--td-action-bg);
        background-color: rgba(45, 74, 62, 0.08);
    }

    .td-site-nav-link:hover::after,
    .td-site-nav-link:focus-visible::after,
    .td-site-nav-link[aria-expanded="true"]::after,
    .td-site-nav-link--active::after {
        transform: scaleX(1);
        opacity: 1;
    }

    .td-site-nav-link:focus-visible {
        box-shadow: 0 0 0 3px var(--td-action-ring);
    }

    .td-header-brand-image {
        flex-shrink: 0;
        height: clamp(2.5rem, 2.25rem + 0.65vw, 3.25rem);
        max-width: min(8.5rem, 30vw);
        width: auto;
        object-fit: contain;
    }

    .td-header-brand-name {
        font-size: clamp(1rem, 0.94rem + 0.32vw, 1.2rem);
        line-height: 1.05;
        white-space: nowrap;
    }

    .td-mega-menu-panel {
        display: grid;
        grid-template-rows: auto minmax(0, 1fr);
        max-height: min(74vh, 36rem);
        overflow: hidden;
        border: 1px solid rgba(209, 213, 219, 0.92);
        border-radius: 1.5rem;
        background: rgba(255, 255, 255, 0.98);
        box-shadow: 0 24px 60px rgba(17, 24, 39, 0.16);
    }

    .td-mega-menu-intro {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: space-between;
        gap: var(--td-space-4);
        padding: var(--td-space-4) var(--td-space-5);
        border-bottom: 1px solid rgba(229, 231, 235, 0.92);
        background: linear-gradient(135deg, rgba(248, 247, 243, 0.96) 0%, rgba(255, 255, 255, 0.98) 100%);
    }

    .td-mega-menu-actions {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--td-space-2);
    }

    .td-mega-menu-body {
        min-height: 0;
        overflow-y: auto;
        padding: var(--td-space-4) var(--td-space-5) var(--td-space-5);
    }

    .td-mega-menu-toolbar-link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 2.5rem;
        padding: 0.625rem 1rem;
        border: 1px solid rgba(209, 213, 219, 0.92);
        border-radius: 9999px;
        background: rgba(255, 255, 255, 0.92);
        color: var(--td-heading-color);
        font-size: 0.875rem;
        line-height: 1.2;
        font-weight: 600;
        transition: border-color var(--td-motion-fast) var(--td-ease-standard), color var(--td-motion-fast) var(--td-ease-standard), background-color var(--td-motion-fast) var(--td-ease-standard);
    }

    .td-mega-menu-toolbar-link:hover,
    .td-mega-menu-toolbar-link:focus-visible {
        border-color: rgba(45, 74, 62, 0.32);
        color: var(--td-action-bg);
        background-color: rgba(234, 241, 238, 0.82);
    }

    .td-mega-menu-chip {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 9999px;
        padding: 0.38rem 0.72rem;
        background-color: var(--td-action-soft);
        color: var(--td-action-bg);
        font-size: var(--td-font-size-caption);
        line-height: 1;
        letter-spacing: var(--td-letter-label);
        font-weight: 700;
        text-transform: uppercase;
    }

    .td-mega-menu-group {
        border: 1px solid rgba(209, 213, 219, 0.86);
        border-radius: var(--td-radius-xl);
        background: linear-gradient(180deg, rgba(248, 247, 243, 0.54) 0%, rgba(255, 255, 255, 0.98) 100%);
        min-width: 0;
        padding: 0.875rem 1rem;
        transition: border-color var(--td-motion-fast) var(--td-ease-standard), box-shadow var(--td-motion-base) var(--td-ease-standard), transform var(--td-motion-base) var(--td-ease-standard), background-color var(--td-motion-base) var(--td-ease-standard);
    }

    .td-mega-menu-group:hover {
        border-color: rgba(45, 74, 62, 0.24);
        box-shadow: var(--td-shadow-card);
        transform: translateY(-1px);
    }

    .td-mega-menu-group--active {
        border-color: rgba(45, 74, 62, 0.3);
        box-shadow: 0 0 0 1px rgba(45, 74, 62, 0.12), var(--td-shadow-card);
        background: linear-gradient(180deg, rgba(234, 241, 238, 0.88) 0%, rgba(255, 255, 255, 0.98) 100%);
    }

    .td-mega-menu-heading {
        display: flex;
        flex-direction: column;
        gap: var(--td-space-1);
    }

    .td-mega-menu-heading-title {
        font-size: 0.95rem;
        line-height: 1.3;
        font-weight: 700;
        color: var(--td-heading-color);
        transition: color var(--td-motion-base) var(--td-ease-standard);
    }

    .td-mega-menu-heading-meta {
        font-size: var(--td-font-size-caption);
        line-height: 1.38;
        letter-spacing: var(--td-letter-label);
        font-weight: 600;
        text-transform: uppercase;
        color: var(--td-text-muted);
        transition: color var(--td-motion-base) var(--td-ease-standard);
    }

    .td-mega-menu-group:hover .td-mega-menu-heading-title,
    .td-mega-menu-group--active .td-mega-menu-heading-title,
    .td-mega-menu-group:hover .td-mega-menu-heading-meta,
    .td-mega-menu-group--active .td-mega-menu-heading-meta {
        color: var(--td-action-bg);
    }

    .td-mega-menu-grid {
        display: grid;
        gap: var(--td-space-3);
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 14.25rem), 1fr));
        align-items: start;
    }

    .td-mega-menu-subitem {
        display: block;
        border-radius: var(--td-radius-md);
        padding: 0.4rem 0.55rem;
        font-size: 0.875rem;
        line-height: 1.4;
        color: var(--td-text-muted);
        transition: color var(--td-motion-base) var(--td-ease-standard), background-color var(--td-motion-base) var(--td-ease-standard), transform var(--td-motion-base) var(--td-ease-standard);
    }

    .td-mega-menu-subitem:hover,
    .td-mega-menu-subitem:focus-visible {
        color: var(--td-action-bg);
        background-color: var(--td-bg-alt);
        transform: translateX(2px);
    }

    .td-mega-menu-subitem--active {
        color: var(--td-action-bg);
        background-color: var(--td-action-soft);
        font-weight: 600;
    }

    .td-input,
    .td-select,
    .td-textarea {
        @apply w-full text-sm outline-none;
        background-color: var(--td-surface-elevated);
        color: var(--td-text);
        border: 1px solid var(--td-border);
        border-radius: var(--td-radius-md);
        padding: var(--td-space-3) var(--td-space-4);
        transition: border-color var(--td-motion-fast) var(--td-ease-standard), box-shadow var(--td-motion-fast) var(--td-ease-standard), background-color var(--td-motion-fast) var(--td-ease-standard);
    }

    .td-input,
    .td-select {
        min-height: var(--td-touch-target-min);
    }

    .td-touch-target {
        min-width: var(--td-touch-target-min);
        min-height: var(--td-touch-target-min);
    }

    .td-input:hover,
    .td-select:hover,
    .td-textarea:hover {
        border-color: var(--td-border-strong);
    }

    .td-input:focus,
    .td-select:focus,
    .td-textarea:focus {
        border-color: var(--td-action-bg);
        box-shadow: 0 0 0 3px var(--td-action-ring);
    }

    .td-input:active,
    .td-select:active,
    .td-textarea:active {
        border-color: var(--td-action-bg-hover);
    }

    .td-input:disabled,
    .td-select:disabled,
    .td-textarea:disabled {
        background-color: #f3f4f6;
        color: #9ca3af;
        border-color: #d1d5db;
        cursor: not-allowed;
        opacity: 0.95;
    }

    .td-input.is-loading,
    .td-select.is-loading,
    .td-textarea.is-loading {
        cursor: progress;
        background-image: linear-gradient(90deg, transparent 0%, rgba(45, 74, 62, 0.08) 50%, transparent 100%);
        background-size: 180% 100%;
        animation: td-field-loading 1.2s ease infinite;
    }

    .td-input.is-invalid,
    .td-select.is-invalid,
    .td-textarea.is-invalid,
    .td-input[aria-invalid="true"],
    .td-select[aria-invalid="true"],
    .td-textarea[aria-invalid="true"] {
        border-color: var(--td-state-danger-text);
        background-color: #fffafa;
        box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.15);
    }

    .td-input.is-valid,
    .td-select.is-valid,
    .td-textarea.is-valid {
        border-color: var(--td-state-success-text);
        box-shadow: 0 0 0 3px rgba(22, 101, 52, 0.12);
    }

    .td-field-error {
        color: var(--td-state-danger-text);
        font-size: var(--td-font-size-body-sm);
        line-height: 1.4;
        margin-top: var(--td-space-1);
    }

    .td-label {
        font-size: var(--td-font-size-label);
        line-height: 1.4;
        letter-spacing: var(--td-letter-label);
        font-weight: 600;
        color: var(--td-text);
        margin-bottom: var(--td-space-1);
        display: block;
    }

    .td-check {
        appearance: none;
        width: 1rem;
        height: 1rem;
        border-radius: calc(var(--td-radius-sm) - 1px);
        border: 1px solid var(--td-border-strong);
        background-color: var(--td-surface-elevated);
        display: inline-grid;
        place-content: center;
        transition: border-color var(--td-motion-fast) var(--td-ease-standard), box-shadow var(--td-motion-fast) var(--td-ease-standard), background-color var(--td-motion-fast) var(--td-ease-standard);
    }

    .td-check::before {
        content: "";
        width: 0.52rem;
        height: 0.52rem;
        transform: scale(0);
        transition: transform var(--td-motion-fast) var(--td-ease-standard);
        box-shadow: inset 1rem 1rem var(--td-text-inverse);
        clip-path: polygon(14% 44%, 0 59%, 46% 100%, 100% 21%, 84% 6%, 43% 67%);
    }

    .td-check:hover {
        border-color: var(--td-action-bg-hover);
    }

    .td-check:focus-visible {
        outline: none;
        box-shadow: 0 0 0 3px var(--td-action-ring);
    }

    .td-check:active {
        border-color: var(--td-action-bg);
    }

    .td-check:checked {
        border-color: var(--td-action-bg);
        background-color: var(--td-action-bg);
    }

    .td-check:checked::before {
        transform: scale(1);
    }

    .td-check:disabled {
        opacity: 0.6;
        cursor: not-allowed;
    }

    .td-check.is-invalid,
    .td-check[aria-invalid="true"] {
        border-color: var(--td-state-danger-text);
        box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.15);
    }

    .td-feedback-success {
        padding: var(--td-space-3);
        border-radius: var(--td-radius-md);
        border: 1px solid var(--td-state-success-border);
        background-color: var(--td-state-success-bg);
        color: var(--td-state-success-text);
        font-size: var(--td-font-size-body-sm);
    }

    .td-feedback-error {
        padding: var(--td-space-3);
        border-radius: var(--td-radius-md);
        border: 1px solid var(--td-state-danger-border);
        background-color: var(--td-state-danger-bg);
        color: var(--td-state-danger-text);
        font-size: var(--td-font-size-body-sm);
    }

    .td-feedback-warning {
        padding: var(--td-space-3);
        border-radius: var(--td-radius-md);
        border: 1px solid var(--td-state-warning-border);
        background-color: var(--td-state-warning-bg);
        color: var(--td-state-warning-text);
        font-size: var(--td-font-size-body-sm);
    }

    .td-feedback-info {
        padding: var(--td-space-3);
        border-radius: var(--td-radius-md);
        border: 1px solid var(--td-state-info-border);
        background-color: var(--td-state-info-bg);
        color: var(--td-state-info-text);
        font-size: var(--td-font-size-body-sm);
    }

    .td-alert {
        padding: var(--td-space-3);
        border-radius: var(--td-radius-md);
        border: 1px solid var(--td-border);
        background-color: var(--td-surface-muted);
        color: var(--td-text);
        font-size: var(--td-font-size-body-sm);
        line-height: 1.45;
    }

    .td-alert-success {
        border-color: var(--td-state-success-border);
        background-color: var(--td-state-success-bg);
        color: var(--td-state-success-text);
    }

    .td-alert-danger {
        border-color: var(--td-state-danger-border);
        background-color: var(--td-state-danger-bg);
        color: var(--td-state-danger-text);
    }

    .td-alert-warning {
        border-color: var(--td-state-warning-border);
        background-color: var(--td-state-warning-bg);
        color: var(--td-state-warning-text);
    }

    .td-alert-info {
        border-color: var(--td-state-info-border);
        background-color: var(--td-state-info-bg);
        color: var(--td-state-info-text);
    }

    .td-badge {
        @apply inline-flex items-center;
        gap: var(--td-space-1);
        padding: 0.2rem 0.55rem;
        border-radius: 9999px;
        border: 1px solid transparent;
        font-size: var(--td-font-size-caption);
        line-height: 1.35;
        letter-spacing: var(--td-letter-label);
        font-weight: 600;
    }

    .td-badge-muted {
        background-color: #f3f4f6;
        color: #4b5563;
        border-color: #e5e7eb;
    }

    .td-badge-primary {
        background-color: var(--td-action-soft);
        color: var(--td-action-bg);
        border-color: rgba(45, 74, 62, 0.22);
    }

    .td-badge-success {
        background-color: #dcfce7;
        color: #166534;
        border-color: #bbf7d0;
    }

    .td-badge-warning {
        background-color: #fef9c3;
        color: #854d0e;
        border-color: #fde68a;
    }

    .td-badge-danger {
        background-color: #fee2e2;
        color: #991b1b;
        border-color: #fecaca;
    }

    .td-badge-info {
        background-color: #dbeafe;
        color: #1d4ed8;
        border-color: #bfdbfe;
    }

    .td-panel {
        background-color: var(--td-surface);
        border: 1px solid var(--td-border);
        border-radius: var(--td-radius-lg);
    }

    .td-table-wrap {
        @apply overflow-x-auto;
        border: 1px solid var(--td-border);
        border-radius: var(--td-radius-lg);
        background-color: var(--td-surface);
    }

    .td-table {
        @apply w-full text-sm;
        border-collapse: separate;
        border-spacing: 0;
    }

    .td-table thead th {
        @apply text-left font-semibold;
        padding: var(--td-space-3) var(--td-space-4);
        background-color: #f9fafb;
        color: #374151;
        border-bottom: 1px solid var(--td-border);
    }

    .td-table tbody td {
        padding: var(--td-space-3) var(--td-space-4);
        border-bottom: 1px solid #eef2f7;
        color: var(--td-text);
        vertical-align: top;
    }

    .td-table tbody tr:last-child td {
        border-bottom: none;
    }

    .td-table tbody tr:hover {
        background-color: #fafbfc;
    }

    .td-accordion {
        border: 1px solid var(--td-border);
        border-radius: var(--td-radius-lg);
        overflow: hidden;
        background-color: var(--td-surface);
    }

    .td-accordion-summary {
        @apply flex items-center justify-between cursor-pointer select-none list-none;
        padding: var(--td-space-4) var(--td-space-5);
        font-weight: 600;
        color: var(--td-text);
        transition: background-color var(--td-motion-fast) var(--td-ease-standard);
    }

    .td-accordion-summary::-webkit-details-marker {
        display: none;
    }

    .td-accordion-summary::marker {
        content: '';
    }

    .td-accordion-summary:hover {
        background-color: #f9fafb;
    }

    .td-accordion-summary:active {
        background-color: #f3f4f6;
    }

    .td-accordion-summary:focus-visible {
        box-shadow: inset 0 0 0 2px var(--td-action-ring);
    }

    .td-accordion[open] > .td-accordion-summary {
        background-color: #f8faf9;
    }

    .td-accordion-panel {
        max-height: 0;
        overflow: hidden;
        transition: max-height var(--td-motion-duration-base) var(--td-motion-ease-standard);
    }

    .td-accordion-icon {
        transition: transform var(--td-motion-duration-base) var(--td-motion-ease-standard);
        will-change: transform;
    }

    .td-accordion-body {
        padding: var(--td-space-4) var(--td-space-5);
        border-top: 1px solid #edf1f5;
        color: var(--td-text-muted);
    }

    .td-muted {
        font-size: var(--td-font-size-body-sm);
        line-height: 1.5;
        color: var(--td-text-muted);
    }

    .td-stack-sm > * + * {
        margin-top: var(--td-space-3);
    }

    .td-stack-md > * + * {
        margin-top: var(--td-space-4);
    }

    .td-stack-lg > * + * {
        margin-top: var(--td-space-6);
    }

    .td-rhythm > * + * {
        margin-top: var(--td-space-5);
    }

    .skip-link {
        @apply absolute left-4 top-1 z-50 -translate-y-full text-sm font-medium transition;
        padding: var(--td-space-2) var(--td-space-4);
        border-radius: var(--td-radius-sm);
        background-color: var(--td-action-bg);
        color: var(--td-text-inverse);
        box-shadow: var(--td-shadow-2);
    }

    .skip-link:focus {
        @apply translate-y-0;
    }

    @keyframes td-field-loading {
        0% {
            background-position: 100% 0;
        }
        100% {
            background-position: -100% 0;
        }
    }
}

@layer utilities {
    /* Tailwind utility harmonization with motion token table */
    .transition,
    .transition-all,
    .transition-colors,
    .transition-transform {
        transition-timing-function: var(--td-motion-ease-standard);
    }

    .duration-200 {
        transition-duration: var(--td-motion-duration-fast);
    }

    .duration-300 {
        transition-duration: var(--td-motion-duration-base);
    }

    .duration-500 {
        transition-duration: var(--td-motion-duration-slow);
    }

    .site-header--hidden {
        transform: translateY(-100%);
    }

    .td-radius-xs {
        border-radius: var(--td-radius-xs);
    }

    .td-radius-sm {
        border-radius: var(--td-radius-sm);
    }

    .td-radius-md {
        border-radius: var(--td-radius-md);
    }

    .td-radius-lg {
        border-radius: var(--td-radius-lg);
    }

    .td-shadow-1 {
        box-shadow: var(--td-shadow-1);
    }

    .td-shadow-2 {
        box-shadow: var(--td-shadow-2);
    }

    .td-shadow-3 {
        box-shadow: var(--td-shadow-3);
    }

    .td-measure {
        max-inline-size: var(--td-measure);
    }

    .td-measure-wide {
        max-inline-size: var(--td-measure-wide);
    }

    .prose {
        color: var(--td-text);
        font-size: var(--td-font-size-body);
        line-height: var(--td-line-copy);
        max-inline-size: var(--td-measure-wide);
    }

    .prose p {
        margin-bottom: var(--td-space-4);
        max-inline-size: var(--td-measure);
    }

    .prose h2,
    .prose h3,
    .prose h4 {
        color: var(--td-heading-color);
        font-family: var(--td-font-family-heading);
        font-weight: 600;
        margin-top: var(--td-space-6);
        margin-bottom: var(--td-space-3);
        text-wrap: balance;
    }

    .prose h2 {
        font-size: var(--td-font-size-h2);
        line-height: var(--td-line-heading);
        letter-spacing: -0.013em;
    }

    .prose h3 {
        font-size: var(--td-font-size-h3);
        line-height: 1.22;
        letter-spacing: -0.01em;
    }

    .prose h4 {
        font-size: var(--td-font-size-h4);
        line-height: 1.3;
        letter-spacing: -0.005em;
    }

    .prose ul {
        @apply list-disc list-inside;
        margin-bottom: var(--td-space-4);
    }

    .prose ol {
        @apply list-inside;
        margin-bottom: var(--td-space-4);
        list-style: decimal;
    }

    .prose a {
        color: var(--td-action-bg);
        text-decoration: underline;
    }

    .prose a:hover {
        color: var(--td-action-bg-hover);
    }

    .prose-wood h2,
    .prose-wood h3,
    .prose-wood h4 {
        color: var(--td-heading-color);
    }

    .home-copy-centered {
        margin-inline: auto;
        text-align: center;
    }

    .home-copy-centered :where(p, h2, h3, h4, ul, ol) {
        margin-inline: auto;
        max-inline-size: var(--td-measure);
        text-align: center;
    }

    .scrollbar-thin {
        scrollbar-width: thin;
        scrollbar-color: rgba(45, 74, 62, 0.35) rgba(0, 0, 0, 0);
    }

    .scrollbar-thin::-webkit-scrollbar {
        height: 8px;
        width: 8px;
    }

    .scrollbar-thin::-webkit-scrollbar-thumb {
        background: rgba(45, 74, 62, 0.35);
        border-radius: 9999px;
    }

    .scrollbar-thin::-webkit-scrollbar-track {
        background: transparent;
    }
}