/**
 * Vellum Design Tokens
 * Sistema de design unificado entre landing e app.
 * Carregar ANTES de custom.css em todos os headers.
 *
 * @version 1.0.0
 * @author WS Design - wbdesignn.com.br
 */

:root {
    /* ============ MARCA ============ */
    --vellum-green: #1A5C38;
    --vellum-green-deep: #0a1f13;
    --vellum-green-soft: #f0f9f2;
    --vellum-gold: #C5A028;
    --vellum-gold-soft: #fcf6e3;
    --vellum-gold-deep: #7e661b;
    --vellum-cream: #faf7f2;
    --vellum-ink: #0a1410;

    /* ============ ESCALAS ============ */
    --vellum-green-50:  #f0f9f2;
    --vellum-green-100: #d5edd9;
    --vellum-green-200: #aedbb5;
    --vellum-green-300: #7ec48a;
    --vellum-green-400: #4da860;
    --vellum-green-500: #1A5C38;
    --vellum-green-600: #155230;
    --vellum-green-700: #104527;
    --vellum-green-800: #0a2e1a;
    --vellum-green-900: #0a1f13;

    --vellum-gold-50:  #fcf6e3;
    --vellum-gold-100: #f7ecbd;
    --vellum-gold-200: #f0db85;
    --vellum-gold-300: #e8c74f;
    --vellum-gold-400: #d9b23b;
    --vellum-gold-500: #C5A028;
    --vellum-gold-600: #a28320;
    --vellum-gold-700: #7e661b;
    --vellum-gold-800: #5c4a15;
    --vellum-gold-900: #3d3110;

    /* ============ NEUTROS ============ */
    --vellum-paper: #ffffff;
    --vellum-bg: #fafaf7;
    --vellum-line: #e8e6e0;
    --vellum-text: #1f2937;
    --vellum-text-soft: #6b7280;
    --vellum-text-muted: #9ca3af;

    /* ============ TIPOGRAFIA ============ */
    --vellum-font-display: 'Playfair Display', Georgia, serif;
    --vellum-font-body: 'Inter', system-ui, -apple-system, sans-serif;

    --vellum-text-display-xl: clamp(2.25rem, 5vw, 3.5rem);
    --vellum-text-display-lg: clamp(1.875rem, 4vw, 2.75rem);
    --vellum-text-display-md: clamp(1.5rem, 3vw, 2rem);
    --vellum-text-display-sm: clamp(1.25rem, 2.5vw, 1.625rem);

    /* Body fluid: escala suave entre mobile (375px) e desktop (1280px+) */
    --vellum-text-body:    clamp(0.875rem, 1.5vw, 1rem);        /* 14 → 16px */
    --vellum-text-body-lg: clamp(1rem, 1.75vw, 1.125rem);       /* 16 → 18px */
    --vellum-text-body-sm: clamp(0.8125rem, 1.25vw, 0.9375rem); /* 13 → 15px */

    /* ============ ESPAÇAMENTO ============ */
    --vellum-radius-sm: 0.5rem;
    --vellum-radius: 0.875rem;
    --vellum-radius-lg: 1.25rem;
    --vellum-radius-xl: 1.75rem;

    /* ============ SOMBRAS ELEGANTES ============ */
    --vellum-shadow-sm: 0 1px 2px rgba(10, 31, 19, 0.04);
    --vellum-shadow: 0 1px 3px rgba(10, 31, 19, 0.06), 0 1px 2px rgba(10, 31, 19, 0.04);
    --vellum-shadow-md: 0 4px 6px -1px rgba(10, 31, 19, 0.08), 0 2px 4px -2px rgba(10, 31, 19, 0.04);
    --vellum-shadow-lg: 0 10px 15px -3px rgba(10, 31, 19, 0.08), 0 4px 6px -4px rgba(10, 31, 19, 0.05);
    --vellum-shadow-gold: 0 4px 14px -2px rgba(197, 160, 40, 0.25);
    --vellum-shadow-green: 0 4px 14px -2px rgba(26, 92, 56, 0.20);

    /* ============ TRANSIÇÕES ============ */
    --vellum-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --vellum-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ============ UTILITY CLASSES (para usar dentro do app) ============ */

.font-display { font-family: var(--vellum-font-display) !important; }
.font-body    { font-family: var(--vellum-font-body) !important; }

.text-vellum-green     { color: var(--vellum-green); }
.text-vellum-gold      { color: var(--vellum-gold); }
.text-vellum-gold-deep { color: var(--vellum-gold-deep); }
.text-vellum-ink       { color: var(--vellum-ink); }

.bg-vellum-green      { background-color: var(--vellum-green); }
.bg-vellum-green-soft { background-color: var(--vellum-green-soft); }
.bg-vellum-gold       { background-color: var(--vellum-gold); }
.bg-vellum-gold-soft  { background-color: var(--vellum-gold-soft); }
.bg-vellum-cream      { background-color: var(--vellum-cream); }

.border-vellum-line { border-color: var(--vellum-line); }

/* ============ COMPONENTES VELLUM ============ */

/* Display heading — para títulos H1/H2 do app */
.v-display {
    font-family: var(--vellum-font-display);
    font-weight: 800;
    color: var(--vellum-ink);
    letter-spacing: -0.02em;
    line-height: 1.05;
}

.v-display-xl { font-size: var(--vellum-text-display-xl); }
.v-display-lg { font-size: var(--vellum-text-display-lg); }
.v-display-md { font-size: var(--vellum-text-display-md); }
.v-display-sm { font-size: var(--vellum-text-display-sm); }

/* Eyebrow — pequenos labels antes de títulos */
.v-eyebrow {
    font-family: var(--vellum-font-body);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--vellum-gold-deep);
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
}
.v-eyebrow::before {
    content: '';
    width: 1.5rem;
    height: 1px;
    background: var(--vellum-gold);
}

/* Card premium */
.v-card {
    background: var(--vellum-paper);
    border-radius: var(--vellum-radius-lg);
    box-shadow: var(--vellum-shadow);
    transition: box-shadow 0.3s var(--vellum-ease), transform 0.3s var(--vellum-ease);
}
.v-card:hover {
    box-shadow: var(--vellum-shadow-lg);
}

.v-card-bordered {
    border: 1px solid var(--vellum-line);
}

/* Botão dourado — accent CTA */
.v-btn-gold {
    background: linear-gradient(135deg, var(--vellum-gold) 0%, var(--vellum-gold-600) 100%);
    color: #fff;
    font-weight: 600;
    padding: 0.75rem 1.5rem;
    border-radius: var(--vellum-radius);
    border: 0;
    cursor: pointer;
    box-shadow: var(--vellum-shadow-gold);
    transition: transform 0.2s var(--vellum-ease), box-shadow 0.2s var(--vellum-ease);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.v-btn-gold:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px -4px rgba(197, 160, 40, 0.4);
    color: #fff;
}

/* Botão verde — primário */
.v-btn-green {
    background: linear-gradient(135deg, var(--vellum-green) 0%, var(--vellum-green-700) 100%);
    color: #fff;
    font-weight: 600;
    padding: 0.75rem 1.5rem;
    border-radius: var(--vellum-radius);
    border: 0;
    cursor: pointer;
    box-shadow: var(--vellum-shadow-green);
    transition: transform 0.2s var(--vellum-ease), box-shadow 0.2s var(--vellum-ease);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.v-btn-green:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px -4px rgba(26, 92, 56, 0.35);
    color: #fff;
}

/* Stat card premium — para o dashboard */
.v-stat {
    background: var(--vellum-paper);
    border-radius: var(--vellum-radius-lg);
    padding: 1.5rem;
    box-shadow: var(--vellum-shadow);
    transition: transform 0.3s var(--vellum-ease-out), box-shadow 0.3s var(--vellum-ease-out);
    position: relative;
    overflow: hidden;
}
.v-stat::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background: var(--vellum-gold);
    opacity: 0;
    transition: opacity 0.3s var(--vellum-ease-out);
}
.v-stat:hover {
    transform: translateY(-2px);
    box-shadow: var(--vellum-shadow-lg);
}
.v-stat:hover::before {
    opacity: 1;
}
.v-stat__value {
    font-family: var(--vellum-font-display);
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--vellum-ink);
    line-height: 1;
    letter-spacing: -0.03em;
}
.v-stat__label {
    font-size: 0.8125rem;
    color: var(--vellum-text-soft);
    margin-top: 0.5rem;
    font-weight: 500;
}
.v-stat__icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.75rem;
    background: var(--vellum-green-soft);
    color: var(--vellum-green);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    margin-bottom: 1rem;
}
.v-stat__icon--gold {
    background: var(--vellum-gold-soft);
    color: var(--vellum-gold-deep);
}

/* Badge dourado — para planos / status */
.v-badge-gold {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    background: var(--vellum-gold-soft);
    color: var(--vellum-gold-deep);
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-radius: 999px;
    border: 1px solid var(--vellum-gold-200);
}

.v-badge-green {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    background: var(--vellum-green-soft);
    color: var(--vellum-green-700);
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-radius: 999px;
    border: 1px solid var(--vellum-green-100);
}

/* Divisor dourado fino */
.v-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--vellum-gold-200), transparent);
    border: 0;
    margin: 2rem 0;
}

/* Trial banner unificado — substitui o gradient quebrado em app/index.php */
.v-trial-banner {
    background: linear-gradient(135deg, var(--vellum-green-700) 0%, var(--vellum-green) 50%, var(--vellum-gold-deep) 130%);
    border-radius: var(--vellum-radius-lg);
    padding: 1.25rem 1.5rem;
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    position: relative;
    overflow: hidden;
}
@media (min-width: 640px) {
    .v-trial-banner {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}
.v-trial-banner::after {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 50%;
    height: 200%;
    background: radial-gradient(ellipse at center, rgba(197, 160, 40, 0.35) 0%, transparent 70%);
    pointer-events: none;
}
.v-trial-banner__title {
    font-family: var(--vellum-font-display);
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}
.v-trial-banner__cta {
    background: var(--vellum-gold);
    color: var(--vellum-green-900);
    font-weight: 700;
    padding: 0.625rem 1.25rem;
    border-radius: var(--vellum-radius);
    font-size: 0.875rem;
    transition: transform 0.2s var(--vellum-ease), box-shadow 0.2s var(--vellum-ease);
    flex-shrink: 0;
    box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.2);
    z-index: 1;
}
.v-trial-banner__cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 16px -4px rgba(0, 0, 0, 0.25);
    color: var(--vellum-green-900);
}

/* Acessibilidade — skip link */
.v-skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--vellum-green);
    color: #fff;
    padding: 0.75rem 1.25rem;
    z-index: 10000;
    text-decoration: none;
    border-radius: 0 0 var(--vellum-radius) 0;
    transition: top 0.2s var(--vellum-ease);
    font-weight: 600;
}
.v-skip-link:focus {
    top: 0;
    outline: 2px solid var(--vellum-gold);
    outline-offset: 2px;
}

/* ============ ACESSIBILIDADE WCAG ============
   Texto com cor dourada (C5A028) tem contraste ~3.3:1 — falha AA para texto normal.
   Quando o dourado for aplicado em <p>, <span>, <small> ou texto pequeno,
   forçamos a versão -deep (#7e661b, contraste ~6.4:1, AA garantido).
*/
p.text-vellum-gold,
span.text-vellum-gold,
small.text-vellum-gold,
.text-vellum-gold[class*="text-xs"],
.text-vellum-gold[class*="text-sm"] {
    color: var(--vellum-gold-deep) !important;
}

/* Foco visível em todos os interativos — WCAG 2.4.7 */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--vellum-gold);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Reduced motion — respeitar preferência do usuário */
@media (prefers-reduced-motion: reduce) {
    .v-card,
    .v-btn-gold,
    .v-btn-green,
    .v-stat,
    .v-trial-banner__cta {
        transition: none !important;
    }
    .v-stat:hover,
    .v-card:hover,
    .v-btn-gold:hover,
    .v-btn-green:hover,
    .v-trial-banner__cta:hover {
        transform: none !important;
    }
}