:root {
    --acc-color-primary: #0b0c09;
    --acc-color-secondary: #3f461d;
    --acc-color-accent: #b08b4a;
    --acc-color-background: #f7f0e6;
    --acc-color-surface: #fbf6ed;
    --acc-color-border: #d8c7ac;
    --acc-color-text-primary: #2c2922;
    --acc-color-text-secondary: #6a5f50;
    --acc-color-muted: #9b8d79;
    --acc-color-success: #4f6f3a;
    --acc-color-warning: #b87b2b;
    --acc-color-error: #9f3d32;
    --acc-font-heading: "Cormorant Garamond", Copperplate, Georgia, serif;
    --acc-font-body: Inter, Arial, sans-serif;
    --acc-font-button: Inter, Arial, sans-serif;
    --acc-space-4: 4px;
    --acc-space-8: 8px;
    --acc-space-12: 12px;
    --acc-space-16: 16px;
    --acc-space-24: 24px;
    --acc-space-32: 32px;
    --acc-space-40: 40px;
    --acc-space-48: 48px;
    --acc-space-64: 64px;
    --acc-space-80: 80px;
    --acc-space-96: 96px;
    --acc-space-128: 128px;
    --acc-container-sm: 760px;
    --acc-container-md: 1040px;
    --acc-container-lg: 1320px;
    --acc-radius-sm: 2px;
    --acc-radius-md: 4px;
    --acc-radius-lg: 8px;
    --acc-shadow-soft: 0 20px 70px rgba(51,39,23,.10);
    --acc-shadow-lift: 0 32px 110px rgba(51,39,23,.16);
    --acc-transition: 220ms ease;
}

body {
    background: var(--acc-color-background);
    color: var(--acc-color-text-primary);
    font-family: var(--acc-font-body);
    overflow-x: clip;
}

:focus-visible {
    outline: 2px solid var(--acc-color-accent);
    outline-offset: 4px;
}

.acc-container-sm,
.acc-container-md,
.acc-container-lg {
    width: min(var(--acc-container-width), calc(100% - 48px));
    margin-inline: auto;
}

.acc-container-sm { --acc-container-width: var(--acc-container-sm); }
.acc-container-md { --acc-container-width: var(--acc-container-md); }
.acc-container-lg { --acc-container-width: var(--acc-container-lg); }
.acc-container-full { width: 100%; }

.acc-grid { display: grid; gap: var(--acc-space-32); }
.acc-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.acc-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.acc-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.acc-flex { display: flex; gap: var(--acc-space-24); }
.acc-flex-center { align-items: center; justify-content: center; }
.acc-hidden { display: none !important; }
.acc-text-center { text-align: center; }
.acc-text-right { text-align: right; }
.acc-bg-dark { background: var(--acc-color-primary); color: var(--acc-color-surface); }
.acc-bg-light { background: var(--acc-color-background); color: var(--acc-color-text-primary); }
.acc-bg-surface { background: var(--acc-color-surface); }
.acc-radius-sm { border-radius: var(--acc-radius-sm); }
.acc-radius-md { border-radius: var(--acc-radius-md); }
.acc-radius-lg { border-radius: var(--acc-radius-lg); }
.acc-shadow-soft { box-shadow: var(--acc-shadow-soft); }
.acc-shadow-lift { box-shadow: var(--acc-shadow-lift); }

.acc-button,
.acc-button-primary,
.acc-button-secondary,
.acc-button-outline,
.acc-button-ghost,
.acc-button-dark,
.acc-button-light {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 24px;
    border: 1px solid transparent;
    font: 700 12px/1 var(--acc-font-button);
    letter-spacing: 1.2px;
    text-transform: uppercase;
    text-decoration: none;
    transition: transform var(--acc-transition), background var(--acc-transition), border-color var(--acc-transition), color var(--acc-transition);
}

.acc-button-primary { background: var(--acc-color-secondary); color: #fff; }
.acc-button-secondary { background: var(--acc-color-accent); color: #fff; }
.acc-button-outline { background: transparent; border-color: var(--acc-color-accent); color: var(--acc-color-text-primary); }
.acc-button-ghost { background: transparent; color: currentColor; }
.acc-button-dark { background: var(--acc-color-primary); color: #fff; }
.acc-button-light { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.28); color: #fff; backdrop-filter: blur(14px); }
.acc-button:hover,
.acc-button-primary:hover,
.acc-button-secondary:hover,
.acc-button-outline:hover,
.acc-button-ghost:hover,
.acc-button-dark:hover,
.acc-button-light:hover { transform: translateY(-2px); }
.acc-button[disabled],
.acc-is-disabled { cursor: not-allowed; opacity: .45; transform: none !important; }
.acc-is-loading { pointer-events: none; position: relative; color: transparent !important; }
.acc-is-loading::after { content: ""; width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: acc-spin .7s linear infinite; color: #fff; }

.acc-card {
    background: var(--acc-color-surface);
    border: 1px solid rgba(176,139,74,.18);
    border-radius: var(--acc-radius-lg);
    box-shadow: var(--acc-shadow-soft);
}

.acc-form-field,
.acc-input,
.acc-textarea,
.acc-select {
    width: 100%;
    border: 1px solid rgba(176,139,74,.28);
    background: #fffaf2;
    color: var(--acc-color-text-primary);
    padding: 15px 16px;
}

.acc-form-field:focus,
.acc-input:focus,
.acc-textarea:focus,
.acc-select:focus {
    border-color: var(--acc-color-accent);
    box-shadow: 0 0 0 3px rgba(176,139,74,.14);
    outline: 0;
}

.acc-form-error { color: var(--acc-color-error); }
.acc-form-success { color: var(--acc-color-success); }
.acc-image-cover { width: 100%; height: 100%; object-fit: cover; }
.acc-image-landscape { aspect-ratio: 4 / 3; object-fit: cover; }
.acc-image-portrait { aspect-ratio: 3 / 4; object-fit: cover; }
.acc-image-hero { aspect-ratio: 16 / 9; object-fit: cover; }
.acc-image-circle { border-radius: 50%; object-fit: cover; }

[data-acc-animate] {
    opacity: 0;
    transform: translateY(24px);
}

[data-acc-animate].is-visible {
    opacity: 1;
    transform: none;
    transition: opacity 700ms ease, transform 700ms ease;
}

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

@media (max-width: 980px) {
    .acc-grid-3,
    .acc-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
    .acc-container-sm,
    .acc-container-md,
    .acc-container-lg { width: min(100% - 28px, var(--acc-container-width)); }
    .acc-grid-2,
    .acc-grid-3,
    .acc-grid-4 { grid-template-columns: 1fr; }
    .acc-flex { flex-direction: column; }
}
