/* ═══════════════════════════════════════════════════════════════════════════
   Cubo Três · Components
   ────────────────────────────────────────────────────────────────────────────
   Buttons · Inputs · Cards · Badges · Stats · Progress · Avatars · Icons
   All use tokens.css variables and respect light/dark mode automatically.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── BUTTONS ──────────────────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    padding: var(--space-sm) var(--space-md);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-none);
    letter-spacing: var(--tracking-tight);
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    cursor: pointer;
    user-select: none;
    transition: background-color var(--duration-fast) var(--ease-standard),
                color var(--duration-fast) var(--ease-standard),
                border-color var(--duration-fast) var(--ease-standard),
                transform var(--duration-fast) var(--ease-standard),
                box-shadow var(--duration-fast) var(--ease-standard);
    text-decoration: none;
    white-space: nowrap;
}
.btn:active { transform: scale(0.985); }
.btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.btn:disabled, .btn[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* Sizes */
.btn--sm { padding: var(--space-xs) var(--space-sm); font-size: var(--text-xs); }
.btn--md { padding: var(--space-sm) var(--space-md); font-size: var(--text-sm); }
.btn--lg { padding: var(--space-md) var(--space-lg); font-size: var(--text-md); }
.btn--icon { padding: var(--space-sm); }

/* Variants */
.btn--primary {
    background: hsl(var(--color-primary));
    color: hsl(var(--color-on-primary));
}
.btn--primary:hover:not(:disabled) {
    background: hsl(var(--teal-700));
}
:root[data-theme='dark'] .btn--primary:hover:not(:disabled),
:root.dark .btn--primary:hover:not(:disabled) {
    background: hsl(var(--cyan-400));
}

.btn--accent {
    background: hsl(var(--color-accent));
    color: hsl(var(--color-on-accent));
}
.btn--accent:hover:not(:disabled) {
    background: hsl(var(--cyan-600));
}
:root[data-theme='dark'] .btn--accent:hover:not(:disabled),
:root.dark .btn--accent:hover:not(:disabled) {
    background: hsl(var(--teal-400));
}

.btn--ghost {
    background: transparent;
    color: hsl(var(--text-body));
}
.btn--ghost:hover:not(:disabled) {
    background: hsl(var(--bg-muted));
    color: hsl(var(--text-heading));
}

.btn--outline {
    background: transparent;
    color: hsl(var(--text-body));
    border-color: hsl(var(--border-default));
}
.btn--outline:hover:not(:disabled) {
    background: hsl(var(--bg-muted));
    border-color: hsl(var(--border-strong));
}

.btn--soft {
    background: hsl(var(--teal-50));
    color: hsl(var(--teal-700));
}
:root[data-theme='dark'] .btn--soft,
:root.dark .btn--soft {
    background: hsl(var(--cyan-500) / 0.15);
    color: hsl(var(--cyan-400));
}
.btn--soft:hover:not(:disabled) {
    background: hsl(var(--teal-100));
}
:root[data-theme='dark'] .btn--soft:hover:not(:disabled),
:root.dark .btn--soft:hover:not(:disabled) {
    background: hsl(var(--cyan-500) / 0.22);
}

.btn--danger {
    background: hsl(var(--error-600));
    color: white;
}
.btn--danger:hover:not(:disabled) { background: hsl(var(--error-700)); }

/* ── INPUTS ──────────────────────────────────────────────────────────── */
.input {
    display: block;
    width: 100%;
    padding: var(--space-sm) var(--space-md);
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: var(--leading-snug);
    color: hsl(var(--text-heading));
    background: hsl(var(--surface-card));
    border: 1px solid hsl(var(--border-default));
    border-radius: var(--radius-sm);
    outline: none;
    transition: border-color var(--duration-fast) var(--ease-standard),
                box-shadow var(--duration-fast) var(--ease-standard);
}
.input::placeholder { color: hsl(var(--text-subtle)); }
.input:hover { border-color: hsl(var(--border-strong)); }
.input:focus { border-color: hsl(var(--color-accent)); box-shadow: var(--shadow-focus); }
.input--error { border-color: hsl(var(--error-500)); }
.input--error:focus { box-shadow: 0 0 0 3px hsl(var(--error-500) / 0.25); }

.input-label {
    display: block;
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: hsl(var(--text-heading));
    margin-bottom: var(--space-2xs);
}
.input-help {
    display: block;
    font-size: var(--text-xs);
    color: hsl(var(--text-muted));
    margin-top: var(--space-2xs);
}
.input-help--error { color: hsl(var(--error-600)); }

/* ── CARDS ──────────────────────────────────────────────────────────── */
.card {
    background: hsl(var(--surface-card));
    border: 1px solid hsl(var(--border-subtle));
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    transition: border-color var(--duration-base) var(--ease-standard),
                box-shadow var(--duration-base) var(--ease-standard),
                transform var(--duration-base) var(--ease-standard);
}
.card--hoverable { cursor: pointer; }
.card--hoverable:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: hsl(var(--cyan-300));
}
.card--selected {
    border-color: hsl(var(--color-accent));
    box-shadow: 0 0 0 2px hsl(var(--color-accent) / 0.25), var(--shadow-md);
}
.card--panel {
    padding: var(--space-xl);
    border-radius: var(--radius-lg);
}
.card--soft,
.card--cream {   /* --cream depreciado, classe mantida por compatibilidade */
    background: hsl(var(--bg-soft));
    border-color: hsl(var(--surface-soft) / 0.5);
}

/* ── BADGES ──────────────────────────────────────────────────────────── */
.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    padding: 3px 10px;
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    line-height: 1.4;
    border-radius: var(--radius-full);
    border: 1px solid transparent;
}
.badge--soft-teal { background: hsl(var(--teal-50)); color: hsl(var(--teal-700)); }
.badge--soft-cyan { background: hsl(var(--cyan-500) / 0.12); color: hsl(var(--cyan-700)); }
.badge--soft-purple { background: hsl(var(--purple-50)); color: hsl(var(--purple-700)); }
.badge--soft-success { background: hsl(var(--success-50)); color: hsl(var(--success-700)); }
.badge--soft-warning { background: hsl(var(--warning-50)); color: hsl(var(--warning-700)); }
.badge--soft-error { background: hsl(var(--error-50)); color: hsl(var(--error-700)); }
.badge--soft-info { background: hsl(var(--info-50)); color: hsl(var(--info-700)); }
.badge--solid-cyan { background: hsl(var(--color-accent)); color: hsl(var(--color-on-accent)); }
.badge--solid-teal { background: hsl(var(--color-primary)); color: hsl(var(--color-on-primary)); }
.badge--outline { background: transparent; border-color: hsl(var(--border-default)); color: hsl(var(--text-body)); }

/* Dark-mode soft tints, switch to accent-based mixes */
:root[data-theme='dark'] .badge--soft-teal,
:root.dark .badge--soft-teal {
    background: hsl(var(--teal-300) / 0.15);
    color: hsl(var(--teal-200));
}
:root[data-theme='dark'] .badge--soft-cyan,
:root.dark .badge--soft-cyan {
    background: hsl(var(--cyan-500) / 0.18);
    color: hsl(var(--cyan-300));
}

/* ── STAT BLOCK ─────────────────────────────────────────────────────── */
.stat {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
}
.stat__value {
    font-family: var(--font-display);
    font-size: var(--text-5xl);
    line-height: var(--leading-none);
    font-weight: var(--weight-light);
    letter-spacing: var(--tracking-display);
    font-variant-numeric: tabular-nums;
    color: hsl(var(--text-display));
}
.stat__label {
    font-size: var(--text-sm);
    color: hsl(var(--text-muted));
    line-height: var(--leading-snug);
}
.stat__delta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: hsl(var(--success-600));
    margin-top: var(--space-2xs);
}
.stat__delta--down { color: hsl(var(--error-600)); }

/* ── PROGRESS BAR ───────────────────────────────────────────────────── */
.progress {
    width: 100%;
    height: 6px;
    background: hsl(var(--bg-muted));
    border-radius: var(--radius-full);
    overflow: hidden;
}
.progress__fill {
    height: 100%;
    background: hsl(var(--color-accent));
    border-radius: var(--radius-full);
    transition: width var(--duration-slow) var(--ease-out);
}
.progress--lg { height: 10px; }
.progress--xs { height: 3px; }

/* ── AVATAR ─────────────────────────────────────────────────────────── */
.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, hsl(var(--cyan-500)) 0%, hsl(var(--teal-600)) 100%);
    color: white;
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    font-family: var(--font-sans);
    flex-shrink: 0;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px hsl(var(--shadow-overlay) / 0.04);
}
.avatar--sm { width: 28px; height: 28px; font-size: var(--text-xs); }
.avatar--lg { width: 56px; height: 56px; font-size: var(--text-md); }
.avatar--xl { width: 80px; height: 80px; font-size: var(--text-lg); }
.avatar img { width: 100%; height: 100%; object-fit: cover; }

.avatar-group {
    display: inline-flex;
}
.avatar-group .avatar {
    border: 2px solid hsl(var(--surface-card));
    margin-left: -8px;
}
.avatar-group .avatar:first-child { margin-left: 0; }

/* ── ICON BUTTON ────────────────────────────────────────────────────── */
.iconbtn {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    border: none;
    background: transparent;
    color: hsl(var(--text-muted));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-standard),
                color var(--duration-fast) var(--ease-standard);
    position: relative;
}
.iconbtn:hover {
    background: hsl(var(--bg-muted));
    color: hsl(var(--text-heading));
}
.iconbtn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.iconbtn--sm { width: 28px; height: 28px; }
.iconbtn--lg { width: 44px; height: 44px; }
.iconbtn__dot {
    position: absolute;
    top: 7px;
    right: 8px;
    width: 7px;
    height: 7px;
    border-radius: var(--radius-full);
    background: hsl(var(--error-500));
    box-shadow: 0 0 0 2px hsl(var(--bg-base));
}

/* ── HELPER LAYOUT ──────────────────────────────────────────────────── */
.stack { display: flex; flex-direction: column; gap: var(--space-md); }
.row { display: flex; flex-direction: row; gap: var(--space-md); align-items: center; }
.row--between { justify-content: space-between; }