/**
 * AngoHost Design System - Fase 2
 * Base visual consolidada para tokens e componentes reutilizaveis.
 */

:root {
    /* ===== Brand / semantic colors ===== */
    --brand-primary-50: #f5f2ff;
    --brand-primary-100: #ede7ff;
    --brand-primary-500: #835bf0;
    --brand-primary-600: #673de6;
    --brand-primary-700: #552ec7;
    --brand-primary-800: #40229a;

    --color-info-500: #3b82f6;
    --color-info-600: #0d6efd;
    --color-success-500: #10b981;
    --color-warning-500: #f59e0b;
    --color-danger-500: #ef4444;

    /* ===== Neutral / surfaces ===== */
    --neutral-50: #f8fafc;
    --neutral-100: #f1f5f9;
    --neutral-200: #e2e8f0;
    --neutral-300: #cbd5e1;
    --neutral-500: #64748b;
    --neutral-700: #334155;
    --neutral-900: #0f172a;

    --surface-0: #ffffff;
    --surface-1: #f8f9fb;
    --surface-2: #f1f5f9;
    --surface-dark: #1f2937;
    --surface-deep-blue: #2f1c6a;

    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-tertiary: #64748b;
    --text-inverse: #ffffff;

    --border-subtle: #e2e8f0;
    --border-default: #cbd5e1;
    --border-strong: #94a3b8;

    /* ===== Typography ===== */
    --font-family-base: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-md: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;
    --font-size-4xl: 2.25rem;

    --line-height-tight: 1.25;
    --line-height-base: 1.5;
    --line-height-relaxed: 1.65;

    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;

    /* ===== Spacing / size ===== */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;

    --control-height-sm: 2rem;
    --control-height-md: 2.75rem;
    --control-height-lg: 3rem;

    /* ===== Radius / shadows ===== */
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-2xl: 1.25rem;
    --radius-pill: 999px;

    --shadow-soft: 0 1px 2px rgba(15, 23, 42, 0.06);
    --shadow-medium: 0 6px 18px rgba(15, 23, 42, 0.08);
    --shadow-elevated: 0 14px 34px rgba(15, 23, 42, 0.12);
    --shadow-glow-primary: 0 0 0 4px rgba(103, 61, 230, 0.2);

    /* ===== Motion / focus ===== */
    --transition-fast: 160ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-normal: 240ms cubic-bezier(0.4, 0, 0.2, 1);
    --focus-ring-color: rgba(103, 61, 230, 0.28);
    --focus-ring-width: 3px;
    --focus-ring: 0 0 0 var(--focus-ring-width) var(--focus-ring-color);

    /* ===== Compatibility aliases (legacy CSS) ===== */
    --brand-primary: var(--brand-primary-600);
    --brand-primary-light: var(--brand-primary-500);
    --brand-primary-dark: var(--brand-primary-700);
    --brand-secondary: var(--color-info-600);
    --brand-accent: #ff6b35;

    --surface-light: var(--surface-0);
    --surface-soft: var(--surface-1);
    --surface-muted: var(--surface-2);

    --text-xs: var(--font-size-xs);
    --text-sm: var(--font-size-sm);
    --text-base: var(--font-size-md);
    --text-lg: var(--font-size-lg);
    --text-xl: var(--font-size-xl);
    --text-2xl: var(--font-size-2xl);
    --text-3xl: var(--font-size-3xl);

    --font-weight-normal: var(--font-weight-regular);

    --shadow-sm: var(--shadow-soft);
    --shadow-md: var(--shadow-medium);
    --shadow-lg: var(--shadow-elevated);
    --shadow-xl: var(--shadow-elevated);
    --transition-base: var(--transition-normal);
    --transition-slow: 320ms cubic-bezier(0.4, 0, 0.2, 1);

    --color-success: var(--color-success-500);
    --color-success-bg: #ecfdf5;
    --color-danger: var(--color-danger-500);
    --color-danger-bg: #fef2f2;
    --color-warning: var(--color-warning-500);
    --color-warning-bg: #fffbeb;
    --color-info: var(--color-info-600);
    --color-info-bg: #eff6ff;

    --primary-color: var(--brand-primary-600);
    --primary-dark: var(--brand-primary-700);
    --secondary-color: var(--text-secondary);
    --success-color: var(--color-success-500);
    --danger-color: var(--color-danger-500);
    --warning-color: var(--color-warning-500);
    --info-color: var(--color-info-600);
    --orange-brand: #ff6b35;

    --font-family: var(--font-family-base);
    --spacing-md: var(--space-4);
    --spacing-sm: var(--space-3);
    --spacing-xs: var(--space-2);
    --spacing-lg: var(--space-5);
    --spacing-xl: var(--space-6);
    --spacing-2xl: var(--space-8);
    --spacing-3xl: var(--space-12);
    --border-radius-md: var(--radius-md);
    --border-radius-lg: var(--radius-lg);
    --border-radius-xl: var(--radius-xl);
    --color-bg-primary: var(--surface-0);
    --color-bg-secondary: var(--surface-1);
    --color-bg-dark: var(--surface-dark);
    --color-text-primary: var(--text-primary);
    --color-text-secondary: var(--text-secondary);
    --color-text-tertiary: var(--text-tertiary);
    --color-text-light: var(--text-inverse);
    --color-primary: var(--brand-primary-600);
    --color-primary-light: var(--brand-primary-500);
    --color-primary-dark: var(--brand-primary-700);
    --color-primary-lighter: var(--brand-primary-100);
    --color-error: var(--color-danger-500);
    --border-color: var(--border-subtle);

    --font-size-base: var(--font-size-md);
    --border-radius-sm: var(--radius-sm);
    --border-radius-full: var(--radius-pill);
}

html,
body {
    font-family: var(--font-family-base);
    color: var(--text-primary);
    background-color: var(--surface-0);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--text-primary);
    line-height: var(--line-height-tight);
}

a {
    color: var(--brand-primary-600);
}

a:hover {
    color: var(--brand-primary-700);
}

:where(a, button, .btn, [role="button"], input, select, textarea):focus-visible {
    outline: none !important;
    box-shadow: var(--focus-ring) !important;
}

/* ===== Buttons ===== */
:where(.btn, .btn-modern, .btn-premium, .btn-primary-modern, .btn-outline-modern):not(.btn-link):not(.btn-close) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: var(--control-height-md);
    padding: 0 var(--space-5);
    border-radius: var(--radius-md) !important;
    border: 1px solid transparent;
    font-family: var(--font-family-base);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    line-height: 1.2;
    transition: all var(--transition-normal);
}

.btn-sm {
    min-height: var(--control-height-sm);
    padding: 0 var(--space-3);
}

.btn-lg {
    min-height: var(--control-height-lg);
    padding: 0 var(--space-6);
}

:where(.btn-primary, .btn-primary-modern, .btn-premium-primary) {
    background: var(--brand-primary-600) !important;
    border-color: var(--brand-primary-600) !important;
    color: var(--text-inverse) !important;
}

:where(.btn-primary, .btn-primary-modern, .btn-premium-primary):hover:not(:disabled) {
    background: var(--brand-primary-700) !important;
    border-color: var(--brand-primary-700) !important;
    color: var(--text-inverse) !important;
    transform: translateY(-1px);
    box-shadow: var(--shadow-medium);
}

:where(.btn-secondary, .btn-premium-secondary) {
    background: var(--surface-1) !important;
    border-color: var(--border-default) !important;
    color: var(--text-primary) !important;
}

:where(.btn-secondary, .btn-premium-secondary):hover:not(:disabled) {
    background: var(--surface-2) !important;
    border-color: var(--border-strong) !important;
    color: var(--text-primary) !important;
}

:where(.btn-outline-primary, .btn-outline-modern) {
    background: transparent !important;
    border-color: var(--brand-primary-600) !important;
    color: var(--brand-primary-600) !important;
}

:where(.btn-outline-primary, .btn-outline-modern):hover:not(:disabled) {
    background: var(--brand-primary-50) !important;
    border-color: var(--brand-primary-700) !important;
    color: var(--brand-primary-700) !important;
}

.btn-outline-secondary {
    background: transparent !important;
    border-color: var(--border-default) !important;
    color: var(--text-secondary) !important;
}

.btn-outline-secondary:hover:not(:disabled) {
    background: var(--surface-1) !important;
    border-color: var(--border-strong) !important;
    color: var(--text-primary) !important;
}

.btn-danger {
    background: var(--color-danger-500) !important;
    border-color: var(--color-danger-500) !important;
    color: var(--text-inverse) !important;
}

.btn-danger:hover:not(:disabled) {
    background: #dc2626 !important;
    border-color: #dc2626 !important;
}

.btn-ghost {
    background: transparent;
    border-color: transparent;
    color: var(--text-secondary);
}

.btn-ghost:hover:not(:disabled) {
    background: var(--surface-1);
    color: var(--text-primary);
}

.btn:disabled,
.btn.disabled,
.btn[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

/* ===== Forms ===== */
:where(.form-control, .form-select, .form-control-modern, .form-control-premium) {
    min-height: var(--control-height-md);
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--surface-0);
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-base);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
}

textarea.form-control,
textarea.form-control-modern,
textarea.form-control-premium {
    min-height: 6.5rem;
    padding-top: var(--space-3);
    padding-bottom: var(--space-3);
}

:where(.form-control, .form-select, .form-control-modern, .form-control-premium)::placeholder {
    color: var(--text-tertiary);
}

:where(.form-control, .form-select, .form-control-modern, .form-control-premium):focus {
    border-color: var(--brand-primary-500);
    box-shadow: var(--focus-ring);
    outline: none;
}

:where(.form-label, .form-label-modern, .form-label-premium) {
    margin-bottom: var(--space-2);
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

.form-text,
.field-hint,
small.text-muted {
    color: var(--text-secondary) !important;
    font-size: var(--font-size-xs);
}

.input-group-text {
    border: 1px solid var(--border-default);
    background: var(--surface-1);
    color: var(--text-secondary);
}

.is-invalid,
.form-control.is-invalid,
.form-select.is-invalid {
    border-color: var(--color-danger-500) !important;
}

.invalid-feedback,
.field-error {
    color: #b91c1c;
    font-size: var(--font-size-xs);
    margin-top: var(--space-1);
}

/* ===== Cards ===== */
:where(.card, .card-modern, .card-premium) {
    background: var(--surface-0);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-soft);
    transition: box-shadow var(--transition-normal), transform var(--transition-normal), border-color var(--transition-fast);
}

:where(.card-modern, .card-premium):hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-medium);
}

:where(.card .card-header, .card-modern .card-header, .card-premium-header) {
    background: var(--surface-1);
    border-bottom: 1px solid var(--border-subtle);
    color: var(--text-primary);
    font-weight: var(--font-weight-semibold);
    padding: var(--space-4) var(--space-5);
}

:where(.card .card-body, .card-modern .card-body, .card-premium-body) {
    padding: var(--space-5);
}

:where(.card .card-footer, .card-modern .card-footer, .card-premium-footer) {
    background: var(--surface-1);
    border-top: 1px solid var(--border-subtle);
    padding: var(--space-4) var(--space-5);
}

/* ===== Alerts ===== */
:where(.alert, .alert-modern, .alert-premium) {
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    padding: var(--space-4) var(--space-5);
    box-shadow: var(--shadow-soft);
}

:where(.alert-success, .alert-premium-success) {
    background: var(--color-success-bg);
    color: #166534;
    border-color: #bbf7d0;
}

:where(.alert-danger, .alert-premium-danger) {
    background: var(--color-danger-bg);
    color: #991b1b;
    border-color: #fecaca;
}

:where(.alert-warning, .alert-premium-warning) {
    background: var(--color-warning-bg);
    color: #92400e;
    border-color: #fde68a;
}

:where(.alert-info, .alert-premium-info) {
    background: var(--color-info-bg);
    color: #1d4ed8;
    border-color: #bfdbfe;
}

/* ===== Badges ===== */
:where(.badge, .badge-modern, .badge-status) {
    border-radius: var(--radius-pill);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    padding: 0.35rem 0.6rem;
    letter-spacing: 0.01em;
}

.badge-success-modern,
.badge-status.paid {
    background: var(--color-success-bg);
    color: #166534;
    border: 1px solid #bbf7d0;
}

.badge-warning-modern,
.badge-status.pending {
    background: var(--color-warning-bg);
    color: #92400e;
    border: 1px solid #fde68a;
}

.badge-danger-modern,
.badge-status.expired,
.badge-status.cancelled {
    background: var(--color-danger-bg);
    color: #991b1b;
    border: 1px solid #fecaca;
}

.badge-info-modern {
    background: var(--color-info-bg);
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
}

.badge-highlight {
    background: var(--brand-primary-50);
    color: var(--brand-primary-700);
    border: 1px solid var(--brand-primary-100);
}

/* ===== Section headers ===== */
.section-header {
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--border-subtle);
}

.section-title {
    color: var(--text-primary);
    font-size: clamp(1.35rem, 2.2vw, 1.9rem);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    margin-bottom: var(--space-2);
}

.section-subtitle,
.section-description {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);
    margin-bottom: 0;
}

/* ===== Modal base ===== */
.modal-content {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-elevated);
}

.modal-header {
    border-bottom: 1px solid var(--border-subtle);
    background: var(--surface-1);
    border-top-left-radius: var(--radius-xl);
    border-top-right-radius: var(--radius-xl);
}

.modal-title {
    color: var(--text-primary);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
}

.modal-footer {
    border-top: 1px solid var(--border-subtle);
    background: var(--surface-1);
    border-bottom-left-radius: var(--radius-xl);
    border-bottom-right-radius: var(--radius-xl);
}

/* ===== Accessibility / motion ===== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
    }
}