/* Ana Terra Tattoo — Design System v0.2.0 */
:root,
.att-ui,
.att-site,
.att-admin-wrap {
    --att-earth: #3A211A;
    --att-sand: #F3E7D3;
    --att-ivory: #FFF9EF;
    --att-red: #9E3828;
    --att-gold: #D99A2B;
    --att-leaf: #667044;
    --att-ink: #241712;
    --att-muted: #776A61;
    --att-white: #FFFFFF;

    --att-font-display: "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
    --att-font-body: "DM Sans", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --att-font-script: "Caveat", "Segoe Print", "Bradley Hand", cursive;

    --att-max-width: 1280px;
    --att-gutter-desktop: 64px;
    --att-gutter-laptop: 48px;
    --att-gutter-tablet: 32px;
    --att-gutter-mobile: 20px;

    --att-space-1: 4px;
    --att-space-2: 8px;
    --att-space-3: 12px;
    --att-space-4: 16px;
    --att-space-5: 24px;
    --att-space-6: 32px;
    --att-space-7: 48px;
    --att-space-8: 64px;
    --att-space-9: 88px;
    --att-space-10: 120px;
    --att-space-11: 160px;

    --att-radius-sm: 12px;
    --att-radius-md: 20px;
    --att-radius-lg: 28px;
    --att-radius-pill: 999px;

    --att-border: rgba(58, 33, 26, .14);
    --att-shadow-sm: 0 10px 30px rgba(58, 33, 26, .08);
    --att-shadow-lg: 0 24px 70px rgba(58, 33, 26, .14);
    --att-ease: cubic-bezier(.22,.61,.36,1);
}

.att-ui,
.att-site {
    color: var(--att-earth);
    font-family: var(--att-font-body);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.att-container {
    width: min(calc(100% - (var(--att-gutter-desktop) * 2)), var(--att-max-width));
    margin-inline: auto;
}

.att-display {
    margin: 0;
    font-family: var(--att-font-display);
    font-size: clamp(48px, 7vw, 104px);
    font-weight: 400;
    line-height: .92;
    letter-spacing: -.035em;
}

.att-heading {
    margin: 0;
    font-family: var(--att-font-display);
    font-size: clamp(36px, 5vw, 72px);
    font-weight: 400;
    line-height: .98;
    letter-spacing: -.025em;
}

.att-script {
    font-family: var(--att-font-script);
    font-size: clamp(28px, 4vw, 56px);
    line-height: 1;
    color: var(--att-red);
}

.att-copy {
    max-width: 720px;
    font-size: clamp(16px, 1.4vw, 19px);
    line-height: 1.72;
    color: var(--att-muted);
}

.att-btn {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 12px 22px;
    border: 1px solid transparent;
    border-radius: var(--att-radius-pill);
    font-family: var(--att-font-body);
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition:
        transform .25s var(--att-ease),
        background-color .25s var(--att-ease),
        color .25s var(--att-ease),
        border-color .25s var(--att-ease),
        box-shadow .25s var(--att-ease);
}

.att-btn:hover {
    transform: translateY(-2px);
}

.att-btn:focus-visible {
    outline: 3px solid rgba(217, 154, 43, .42);
    outline-offset: 3px;
}

.att-btn-primary {
    background: var(--att-red);
    color: var(--att-ivory);
}

.att-btn-primary:hover,
.att-btn-primary:focus {
    background: #842E22;
    color: var(--att-ivory);
}

.att-btn-secondary {
    background: transparent;
    color: var(--att-earth);
    border-color: rgba(58, 33, 26, .38);
}

.att-btn-secondary:hover,
.att-btn-secondary:focus {
    background: var(--att-earth);
    border-color: var(--att-earth);
    color: var(--att-ivory);
}

@media (max-width: 1200px) {
    .att-container {
        width: min(calc(100% - (var(--att-gutter-laptop) * 2)), var(--att-max-width));
    }
}

@media (max-width: 900px) {
    .att-container {
        width: min(calc(100% - (var(--att-gutter-tablet) * 2)), var(--att-max-width));
    }
}

@media (max-width: 600px) {
    .att-container {
        width: calc(100% - (var(--att-gutter-mobile) * 2));
    }
}

@media (prefers-reduced-motion: reduce) {
    .att-ui *,
    .att-site * {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}