:root {
    --hub-boutique: #EC4899;
    --hub-boutique-50:  #FDF2F8;
    --hub-boutique-100: #FCE7F3;
    --hub-boutique-200: #FBCFE8;
    --hub-boutique-300: #F9A8D4;
    --hub-boutique-400: #F472B6;
    --hub-boutique-500: #EC4899;
    --hub-boutique-600: #DB2777;
    --hub-boutique-700: #BE185D;
    --hub-boutique-800: #9D174D;
    --hub-boutique-900: #831843;

    --hub-ink:    #0F172A;
    --hub-ink-2:  #1E293B;
    --hub-muted:  #64748B;
    --hub-line:   #E2E8F0;
    --hub-paper:  #F8FAFC;
}

html { font-family: 'Inter', system-ui, sans-serif; color: var(--hub-ink); background: var(--hub-paper); }
.font-display { font-family: 'Manrope', 'Inter', sans-serif; letter-spacing: -0.01em; }

.btn-primary {
    background: var(--hub-boutique-600);
    color: white;
    font-weight: 600;
    padding: 0.625rem 1rem;
    border-radius: 0.5rem;
    transition: background .15s ease;
}
.btn-primary:hover { background: var(--hub-boutique-700); }
.btn-primary:focus { outline: 2px solid var(--hub-boutique-300); outline-offset: 2px; }

.btn-ghost {
    background: transparent;
    color: var(--hub-ink);
    font-weight: 500;
    padding: 0.5rem 0.875rem;
    border-radius: 0.5rem;
    transition: background .15s ease;
}
.btn-ghost:hover { background: var(--hub-line); }

.input {
    width: 100%;
    border: 1px solid var(--hub-line);
    border-radius: 0.5rem;
    padding: 0.625rem 0.875rem;
    background: white;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.input:focus { outline: none; border-color: var(--hub-boutique-400); box-shadow: 0 0 0 3px var(--hub-boutique-100); }

.card { background: white; border: 1px solid var(--hub-line); border-radius: 0.875rem; }

.badge-hub {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.625rem;
    background: var(--hub-boutique-100);
    color: var(--hub-boutique-700);
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 9999px;
}

/* Hexágono flat-top + 4-node X (badge HUB) */
.hub-badge {
    width: 36px;
    height: 36px;
    background: var(--hub-boutique-800);
    clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0% 50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 800;
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
}