:root {
    --ink: #0B0B0B;
    --muted: #6B6B6B;
    --line: #E7E7E7;
    --paper: #FFFFFF;

    /* BRAND */
    --brand: #FABB00;
    --brand-dark: #E1A800;
}

/* Helpers para usar com Tailwind via classes no body */
.bg-paper {
    background: var(--paper);
}

.text-ink {
    color: var(--ink);
}

.text-muted {
    color: var(--muted);
}

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

.font-display {
    font-family: "Oswald", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.font-body {
    font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.label {
    letter-spacing: .18em;
    text-transform: uppercase;
}

.link-u {
    text-decoration: underline;
    text-decoration-color: rgba(0, 0, 0, .25);
    text-underline-offset: 4px;
}

.btn {
    border: 1px solid var(--ink);
    padding: .85rem 1.05rem;
    border-radius: .75rem;
    font-weight: 600;
    transition: 150ms ease;
}

.btn:hover {
    background: var(--brand);
    color: #000;
    border-color: var(--brand);
}

.btn-solid {
    background: var(--brand);
    color: #000;
    border: 1px solid var(--brand);
    padding: .85rem 1.05rem;
    border-radius: .75rem;
    font-weight: 700;
    transition: 150ms ease;
}

.btn-solid:hover {
    background: var(--brand-dark);
}

.field {
    border: 1px solid var(--line);
    border-radius: .85rem;
    padding: .85rem 1rem;
    width: 100%;
    background: #fff;
}

.field:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(250, 187, 0, .25);
}

.pill {
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: .5rem .85rem;
    font-size: .875rem;
}

.pill[aria-pressed="true"] {
    border-color: var(--ink);
}

.card:hover .cardTitle {
    text-decoration: underline;
    text-decoration-color: rgba(0, 0, 0, .25);
    text-underline-offset: 5px;
}


/* Focus ring helper (used in templates) */
.focus-ring:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(250, 187, 0, .25);
}


.brand-gradient {
    background: linear-gradient(180deg, #FFD84D, var(--brand));
}