/* qrwine — Vindima Digital · Components base
 *
 * Classes vanilla CSS baseadas em components.md do handoff.
 * Estilo "tradução técnica": cada classe Tailwind do handoff mapeia para
 * uma classe vanilla aqui. Importar DEPOIS de tokens.css.
 *
 * Convenção de nomes: prefix `v-` para evitar colisão com CSS legado.
 */

/* ──────────────────────────────────────────────────────────────
 * Reset / base
 * ────────────────────────────────────────────────────────────── */
.v-app {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: var(--t-body);
    line-height: 1.5;
    margin: 0;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.v-container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--gutter-desktop);
    width: 100%;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .v-container { padding: 0 var(--gutter-mobile); }
}

/* ──────────────────────────────────────────────────────────────
 * Typography helpers
 * ────────────────────────────────────────────────────────────── */
.v-display-1 { font-size: var(--t-display-1); line-height: 0.97; letter-spacing: var(--ls-tight); font-weight: var(--fw-semibold); }
.v-display-2 { font-size: var(--t-display-2); line-height: 1;    letter-spacing: var(--ls-display); font-weight: var(--fw-semibold); }
.v-display-3 { font-size: var(--t-display-3); line-height: 0.98; letter-spacing: var(--ls-display); font-weight: var(--fw-semibold); }
.v-display-4 { font-size: var(--t-display-4); line-height: 1.05; letter-spacing: var(--ls-tight-sm); font-weight: var(--fw-semibold); }

.v-h1 { font-size: var(--t-h1); line-height: 1.2; letter-spacing: var(--ls-tight-sm); font-weight: var(--fw-semibold); }
.v-h2 { font-size: var(--t-h2); line-height: 1.3; font-weight: var(--fw-semibold); }
.v-h3 { font-size: var(--t-h3); line-height: 1.35; font-weight: var(--fw-semibold); }
.v-h4 { font-size: var(--t-h4); line-height: 1.4; font-weight: var(--fw-semibold); }

.v-body-lg { font-size: var(--t-body-lg); line-height: 1.55; }
.v-body    { font-size: var(--t-body);    line-height: 1.5; }
.v-body-sm { font-size: var(--t-body-sm); line-height: 1.5; }

/* Italic Fraunces — para acentos editoriais (uma palavra por linha máx) */
.v-italic {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: var(--fw-regular);
}

/* MonoLabel — voz técnica, micro-tipografia */
.v-mono-label {
    font-family: var(--font-mono);
    font-size: var(--t-caption);
    text-transform: uppercase;
    letter-spacing: var(--ls-mono);
    color: var(--muted);
    font-weight: var(--fw-medium);
}
.v-mono-label--accent { color: var(--copper-deep); }
.v-mono-label--micro {
    font-size: var(--t-micro);
    letter-spacing: var(--ls-mono);
}

/* ──────────────────────────────────────────────────────────────
 * Surfaces (do tokens.css mas garantidos aqui também)
 * ────────────────────────────────────────────────────────────── */
.v-surface-paper      { background: var(--paper);      color: var(--ink); }
.v-surface-paper-soft { background: var(--paper-soft); color: var(--ink); }
.v-surface-ink        { background: var(--ink);        color: var(--paper); }
.v-surface-green      { background: var(--green);      color: var(--paper); }

/* ──────────────────────────────────────────────────────────────
 * Buttons
 * ────────────────────────────────────────────────────────────── */
.v-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    border: none;
    border-radius: var(--r-md);
    font-family: var(--font-sans);
    font-weight: var(--fw-semibold);
    font-size: var(--t-body-sm);
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
    transition: transform var(--d-fast) var(--ease-out), box-shadow var(--d-fast) var(--ease-out), background var(--d-fast) var(--ease-out);
    white-space: nowrap;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
}
.v-btn:focus-visible {
    outline: 2px solid var(--copper);
    outline-offset: 2px;
}
.v-btn:disabled,
.v-btn[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

/* Sizes */
.v-btn--sm { padding: 8px 14px; font-size: var(--t-body-sm); }
.v-btn--md { padding: 12px 18px; font-size: var(--t-body-sm); }
.v-btn--lg { padding: 15px 24px; font-size: var(--t-body); }

/* Variants */
.v-btn--primary {
    background: var(--copper);
    color: #ffffff;
    box-shadow: var(--shadow-cta);
}
.v-btn--primary:hover:not(:disabled) {
    background: var(--copper-deep);
    box-shadow: 0 2px 0 var(--copper-deep);
    transform: translateY(2px);
}
.v-btn--primary:active:not(:disabled) {
    box-shadow: 0 0 0 var(--copper-deep);
    transform: translateY(4px);
}

.v-btn--secondary {
    background: var(--ink);
    color: var(--paper);
}
.v-btn--secondary:hover:not(:disabled) {
    background: var(--ink-soft);
}

.v-btn--ghost {
    background: transparent;
    color: var(--ink);
    border: 1.5px solid var(--ink);
}
.v-btn--ghost:hover:not(:disabled) {
    background: var(--ink);
    color: var(--paper);
}

/* Variant on dark surfaces */
.v-btn--ghost-light {
    background: transparent;
    color: var(--paper);
    border: 1.5px solid var(--paper);
}
.v-btn--ghost-light:hover:not(:disabled) {
    background: var(--paper);
    color: var(--ink);
}

/* ──────────────────────────────────────────────────────────────
 * Cards
 * ────────────────────────────────────────────────────────────── */
.v-card {
    background: var(--paper-soft);
    border: 1px solid var(--rule);
    border-radius: var(--r-lg);
    padding: var(--s-6);
    box-sizing: border-box;
}
.v-card--elevated {
    border: none;
    box-shadow: var(--shadow-card);
}
.v-card--ink {
    background: var(--ink);
    color: var(--paper);
    border: none;
}
.v-card--green {
    background: var(--green);
    color: var(--paper);
    border: none;
}
.v-card--lg { padding: var(--s-10); }
.v-card--xl { padding: var(--s-12); border-radius: var(--r-2xl); }

/* ──────────────────────────────────────────────────────────────
 * Forms
 * ────────────────────────────────────────────────────────────── */
.v-field {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
}
.v-field__label {
    font-family: var(--font-mono);
    font-size: var(--t-caption);
    text-transform: uppercase;
    letter-spacing: var(--ls-mono);
    color: var(--muted);
    font-weight: var(--fw-medium);
}
.v-input,
.v-textarea,
.v-select {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--rule);
    border-radius: var(--r-md);
    background: var(--paper);
    font-family: var(--font-sans);
    font-size: var(--t-body);
    color: var(--ink);
    box-sizing: border-box;
    transition: border-color var(--d-fast), box-shadow var(--d-fast);
    -webkit-appearance: none;
    appearance: none;
}
.v-input:focus,
.v-textarea:focus,
.v-select:focus {
    outline: none;
    border-color: var(--copper);
    box-shadow: 0 0 0 2px rgba(184, 92, 46, 0.18);
}
.v-input::placeholder,
.v-textarea::placeholder {
    color: var(--muted);
}
.v-textarea {
    min-height: 120px;
    resize: vertical;
    font-family: var(--font-sans);
    line-height: 1.5;
}
.v-field__hint {
    font-size: var(--t-body-sm);
    color: var(--muted);
}
.v-field__error {
    font-family: var(--font-mono);
    font-size: var(--t-caption);
    text-transform: uppercase;
    letter-spacing: var(--ls-mono);
    color: var(--copper-deep);
}

/* ──────────────────────────────────────────────────────────────
 * Badges / Pills
 * ────────────────────────────────────────────────────────────── */
.v-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    padding: 4px 10px;
    border-radius: var(--r-pill);
    font-family: var(--font-mono);
    font-size: var(--t-caption);
    text-transform: uppercase;
    letter-spacing: var(--ls-mono);
    font-weight: var(--fw-medium);
    background: var(--paper-soft);
    color: var(--muted);
    border: 1px solid var(--rule);
}
.v-badge--copper { background: rgba(184, 92, 46, 0.12); color: var(--copper-deep); border-color: rgba(184, 92, 46, 0.3); }
.v-badge--green  { background: var(--status-active-bg); color: var(--green); border-color: rgba(61, 88, 64, 0.25); }
.v-badge--draft  { background: var(--status-draft-bg); color: var(--ink-soft); border-color: var(--rule); }

/* ──────────────────────────────────────────────────────────────
 * Nav (top)
 * ────────────────────────────────────────────────────────────── */
.v-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--s-5) 0;
    gap: var(--s-6);
}
.v-nav__links {
    display: flex;
    align-items: center;
    gap: var(--s-6);
    list-style: none;
    margin: 0;
    padding: 0;
}
.v-nav__link {
    color: var(--ink);
    text-decoration: none;
    font-size: var(--t-body-sm);
    font-weight: var(--fw-medium);
    transition: color var(--d-fast);
}
.v-nav__link:hover { color: var(--copper-deep); }
.v-nav__cta {
    display: flex;
    align-items: center;
    gap: var(--s-3);
}

@media (max-width: 768px) {
    .v-nav__links { display: none; }
}

/* ──────────────────────────────────────────────────────────────
 * Footer
 * ────────────────────────────────────────────────────────────── */
.v-footer {
    background: var(--ink);
    color: var(--paper);
    padding: var(--s-16) 0 var(--s-8);
    margin-top: var(--s-24);
}
.v-footer__grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: var(--s-10);
    margin-bottom: var(--s-12);
}
.v-footer__col-title {
    font-family: var(--font-mono);
    font-size: var(--t-caption);
    text-transform: uppercase;
    letter-spacing: var(--ls-mono);
    color: var(--cream);
    margin-bottom: var(--s-4);
}
.v-footer__link {
    display: block;
    color: var(--paper);
    text-decoration: none;
    font-size: var(--t-body-sm);
    margin-bottom: var(--s-2);
    opacity: 0.85;
    transition: opacity var(--d-fast);
}
.v-footer__link:hover { opacity: 1; }
.v-footer__copy {
    border-top: 1px solid rgba(244, 238, 224, 0.15);
    padding-top: var(--s-6);
    font-family: var(--font-mono);
    font-size: var(--t-micro);
    text-transform: uppercase;
    letter-spacing: var(--ls-mono);
    color: var(--cream);
    opacity: 0.7;
}
@media (max-width: 768px) {
    .v-footer__grid {
        grid-template-columns: 1fr;
        gap: var(--s-8);
    }
}

/* ──────────────────────────────────────────────────────────────
 * Utilities
 * ────────────────────────────────────────────────────────────── */
.v-divider { border: 0; border-top: 1px solid var(--rule); margin: var(--s-8) 0; }
.v-stack-2 > * + * { margin-top: var(--s-2); }
.v-stack-4 > * + * { margin-top: var(--s-4); }
.v-stack-6 > * + * { margin-top: var(--s-6); }
.v-stack-8 > * + * { margin-top: var(--s-8); }
.v-stack-12 > * + * { margin-top: var(--s-12); }

.v-text-copper { color: var(--copper); }
.v-text-copper-deep { color: var(--copper-deep); }
.v-text-green  { color: var(--green); }
.v-text-muted  { color: var(--muted); }
.v-text-paper  { color: var(--paper); }
.v-text-cream  { color: var(--cream); }

/* ──────────────────────────────────────────────────────────────
 * Reduced motion — desactiva transforms/animations
 * ────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}