/**
 * Design System — fundações visuais (enterprise)
 * Prefixo canônico: --ds-
 * Grid de espaçamento: múltiplos de 8px (--ds-space-1 = 8px)
 * Aliases no final: compatíveis com app.css existente (--panel, --text, …)
 */

:root {
    /* -------------------------------------------------------------------------
       Cores principais (marca / ação)
       ------------------------------------------------------------------------- */
    --ds-color-primary: #4f46e5;
    --ds-color-primary-hover: #4338ca;
    --ds-color-primary-active: #3730a3;
    --ds-color-primary-foreground: #ffffff;
    --ds-color-primary-muted: rgba(79, 70, 229, 0.12);
    --ds-color-primary-border: rgba(79, 70, 229, 0.35);

    /* RGB para rgba() em sombras e overlays */
    --ds-color-primary-rgb: 79, 70, 229;

    /* Acento institucional (barras, ênfase única — evita arco-íris de gradiente) */
    --ds-accent-deep: #312e81;
    --ds-accent-spine: linear-gradient(180deg, #4338ca 0%, #312e81 100%);

    /* -------------------------------------------------------------------------
       Neutros (escala slate — fundos, texto, divisórias)
       ------------------------------------------------------------------------- */
    --ds-neutral-50: #f8fafc;
    --ds-neutral-100: #f1f5f9;
    --ds-neutral-200: #e2e8f0;
    --ds-neutral-300: #cbd5e1;
    --ds-neutral-400: #94a3b8;
    --ds-neutral-500: #64748b;
    --ds-neutral-600: #475569;
    --ds-neutral-700: #334155;
    --ds-neutral-800: #1e293b;
    --ds-neutral-900: #0f172a;
    --ds-neutral-950: #020617;

    /* Texto sobre claro — tinta editorial (títulos) vs corpo */
    --ds-text-ink: #0b1220;
    --ds-text-primary: #0f172a;
    --ds-text-secondary: #475569;
    --ds-text-tertiary: #64748b;
    --ds-text-disabled: #94a3b8;
    --ds-text-inverse: #f8fafc;

    /* -------------------------------------------------------------------------
       Semânticas
       ------------------------------------------------------------------------- */
    --ds-color-success: #059669;
    --ds-color-success-hover: #047857;
    --ds-color-success-muted: rgba(5, 150, 105, 0.1);
    --ds-color-success-border: rgba(5, 150, 105, 0.28);

    --ds-color-warning: #d97706;
    --ds-color-warning-hover: #b45309;
    --ds-color-warning-muted: rgba(217, 119, 6, 0.12);
    --ds-color-warning-border: rgba(217, 119, 6, 0.35);

    --ds-color-error: #dc2626;
    --ds-color-error-hover: #b91c1c;
    --ds-color-error-muted: rgba(220, 38, 38, 0.1);
    --ds-color-error-border: rgba(220, 38, 38, 0.3);

    --ds-color-info: #0284c7;
    --ds-color-info-hover: #0369a1;
    --ds-color-info-muted: rgba(2, 132, 199, 0.1);
    --ds-color-info-border: rgba(2, 132, 199, 0.3);

    /* Aliases semânticos curtos (leitura em componentes) */
    --ds-success: var(--ds-color-success);
    --ds-warning: var(--ds-color-warning);
    --ds-error: var(--ds-color-error);
    --ds-info: var(--ds-color-info);

    /* -------------------------------------------------------------------------
       Fundos de aplicação
       ------------------------------------------------------------------------- */
    --ds-bg-app: #eef1f5;
    --ds-bg-app-gradient: linear-gradient(180deg, #f5f6f8 0%, #e8ecf1 55%, #e2e6ed 100%);
    --ds-bg-elevated: #ffffff;
    --ds-surface-card: #ffffff;
    --ds-surface-card-subtle: #fcfcfd;
    --ds-surface-muted: #f8fafc;
    --ds-surface-hover: #f1f5f9;

    /* -------------------------------------------------------------------------
       Bordas
       ------------------------------------------------------------------------- */
    --ds-border-subtle: rgba(15, 23, 42, 0.06);
    --ds-border-default: rgba(15, 23, 42, 0.1);
    --ds-border-strong: rgba(15, 23, 42, 0.14);
    --ds-border-focus: rgba(var(--ds-color-primary-rgb), 0.45);

    /* Hex legível para contextos que não aceitam alpha */
    --ds-border-default-solid: var(--ds-neutral-200);

    /* -------------------------------------------------------------------------
       Sombras (elevação funcional — família única, tom slate)
       ------------------------------------------------------------------------- */
    --ds-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.045);
    --ds-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 14px rgba(15, 23, 42, 0.05);
    --ds-shadow-md: 0 4px 18px rgba(15, 23, 42, 0.065);
    --ds-shadow-lg: 0 10px 36px rgba(15, 23, 42, 0.09);
    --ds-shadow-xl: 0 22px 50px rgba(15, 23, 42, 0.12);
    --ds-shadow-ring-focus: 0 0 0 2px var(--ds-surface-card), 0 0 0 4px rgba(var(--ds-color-primary-rgb), 0.28);

    /* Brilho superior em cartões (evita blocos “chapados”) */
    --ds-surface-inset-top: inset 0 1px 0 rgba(255, 255, 255, 0.78);

    /* Movimento — mesma curva em interações */
    --ds-duration-fast: 0.12s;
    --ds-duration: 0.16s;
    --ds-duration-slow: 0.22s;
    --ds-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ds-ease-standard: cubic-bezier(0.16, 1, 0.3, 1);
    --ds-transition-surface: border-color var(--ds-duration) var(--ds-ease-out), box-shadow var(--ds-duration) var(--ds-ease-out), background-color var(--ds-duration) var(--ds-ease-out);
    --ds-transition-color: color var(--ds-duration) var(--ds-ease-out), background-color var(--ds-duration) var(--ds-ease-out), border-color var(--ds-duration) var(--ds-ease-out);

    /* -------------------------------------------------------------------------
       Tipografia
       ------------------------------------------------------------------------- */
    --ds-font-sans: "Inter", "Source Sans 3", "Segoe UI", system-ui, -apple-system, sans-serif;
    --ds-font-mono: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, monospace;

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

    --ds-letter-spacing-tight: -0.02em;
    --ds-letter-spacing-wide: 0.02em;
    /* Hierarquia editorial (páginas / dashboards) */
    --ds-tracking-page-title: -0.035em;
    --ds-tracking-overline: 0.1em;

    /* Títulos (tamanhos em rem — base 16px) */
    --ds-font-size-display: 1.875rem; /* 30px */
    --ds-line-height-display: 1.2;

    --ds-font-size-h1: 1.5rem; /* 24px — página */
    --ds-line-height-h1: 1.25;

    --ds-font-size-h2: 1.25rem; /* 20px — seção */
    --ds-line-height-h2: 1.3;

    --ds-font-size-h3: 1.125rem; /* 18px — subseção / card title */
    --ds-line-height-h3: 1.35;

    --ds-font-size-h4: 1rem; /* 16px */
    --ds-line-height-h4: 1.4;

    /* Corpo e UI */
    --ds-font-size-body-lg: 1rem; /* 16px */
    --ds-line-height-body-lg: 1.5;

    --ds-font-size-body: 0.875rem; /* 14px — padrão */
    --ds-line-height-body: 1.5;

    --ds-font-size-small: 0.8125rem; /* 13px — tabelas densas, labels */
    --ds-line-height-small: 1.45;

    --ds-font-size-caption: 0.75rem; /* 12px — hints, meta */
    --ds-line-height-caption: 1.4;

    /* Atalhos compostos (opcional em novos componentes) */
    --ds-type-display: var(--ds-font-weight-semibold) var(--ds-font-size-display) / var(--ds-line-height-display) var(--ds-font-sans);
    --ds-type-h1: var(--ds-font-weight-semibold) var(--ds-font-size-h1) / var(--ds-line-height-h1) var(--ds-font-sans);
    --ds-type-h2: var(--ds-font-weight-semibold) var(--ds-font-size-h2) / var(--ds-line-height-h2) var(--ds-font-sans);
    --ds-type-h3: var(--ds-font-weight-semibold) var(--ds-font-size-h3) / var(--ds-line-height-h3) var(--ds-font-sans);
    --ds-type-body: var(--ds-font-weight-regular) var(--ds-font-size-body) / var(--ds-line-height-body) var(--ds-font-sans);
    --ds-type-small: var(--ds-font-weight-regular) var(--ds-font-size-small) / var(--ds-line-height-small) var(--ds-font-sans);
    --ds-type-caption: var(--ds-font-weight-regular) var(--ds-font-size-caption) / var(--ds-line-height-caption) var(--ds-font-sans);

    /* -------------------------------------------------------------------------
       Espaçamento — grid 8px (use em novos layouts)
       ------------------------------------------------------------------------- */
    --ds-space-0: 4px; /* meio passo: ícones, ajustes finos */
    --ds-space-1: 8px;
    --ds-space-2: 16px;
    --ds-space-3: 24px;
    --ds-space-4: 32px;
    --ds-space-5: 40px;
    --ds-space-6: 48px;
    --ds-space-7: 56px;
    --ds-space-8: 64px;
    --ds-space-9: 72px;
    --ds-space-10: 80px;

    /* Padding padrão */
    --ds-page-padding-x: var(--ds-space-4); /* 32px */
    --ds-page-padding-y: var(--ds-space-3); /* 24px */
    --ds-card-padding: var(--ds-space-3); /* 24px */
    --ds-card-padding-compact: var(--ds-space-2); /* 16px */
    --ds-section-gap: var(--ds-space-3); /* entre blocos principais */
    --ds-stack-gap: var(--ds-space-2); /* pilha vertical homogênea */

    /* -------------------------------------------------------------------------
       Raio de borda
       ------------------------------------------------------------------------- */
    --ds-radius-sm: 8px;
    --ds-radius-md: 12px;
    --ds-radius-lg: 16px;
    --ds-radius-xl: 20px;
    --ds-radius-pill: 9999px;

    /* -------------------------------------------------------------------------
       Alturas de controles (alvo de toque + densidade enterprise)
       ------------------------------------------------------------------------- */
    --ds-input-height: 40px;
    --ds-input-height-sm: 32px;
    --ds-input-height-lg: 44px;
    --ds-input-padding-x: var(--ds-space-2);

    --ds-btn-height: 40px;
    --ds-btn-height-sm: 32px;
    --ds-btn-height-lg: 44px;
    --ds-btn-padding-x: var(--ds-space-2);
    --ds-btn-padding-x-compact: var(--ds-space-2);

    /* -------------------------------------------------------------------------
       Shell — sidebar (valores de layout; estilos detalhados permanecem em app.css)
       ------------------------------------------------------------------------- */
    --ds-sidebar-bg: #0b1220;
    --ds-sidebar-bg-deep: #070b12;
    --ds-sidebar-text: #e8edf4;
    --ds-sidebar-muted: #8b9cb3;
    --ds-sidebar-hover: rgba(255, 255, 255, 0.07);
    --ds-sidebar-active: rgba(var(--ds-color-primary-rgb), 0.22);
    --ds-sidebar-border: rgba(255, 255, 255, 0.09);
    --ds-sidebar-width: 260px;
    --ds-sidebar-float: 12px;
    --ds-sidebar-gap: 16px;
    --ds-sidebar-radius: var(--ds-radius-lg);

    /* -------------------------------------------------------------------------
       Cabeçalhos de tabela / listas densas
       ------------------------------------------------------------------------- */
    --ds-table-head-bg: linear-gradient(180deg, #f8fafc 0%, #eef2f7 55%, #e8edf3 100%);
    --ds-table-head-bg-solid: #eef2f7;
    --ds-table-head-border: rgba(15, 23, 42, 0.1);
    --ds-table-head-text: var(--ds-neutral-700);
    --ds-table-zebra-bg: rgba(248, 250, 252, 0.92);
    --ds-table-row-hover-bg: rgba(79, 70, 229, 0.055);
    --ds-table-row-hover-border: rgba(79, 70, 229, 0.12);
    --ds-table-cell-py: 0.7rem;
    --ds-table-cell-px: 0.95rem;

    /* =========================================================================
       Aliases legados — usados por app.css e views (não alterar nomes)
       ========================================================================= */
    --panel: var(--ds-surface-card);
    --text: var(--ds-text-primary);
    --muted: var(--ds-text-secondary);
    --border: var(--ds-border-default-solid);
    --accent: var(--ds-color-primary);
    --accent-hover: var(--ds-color-primary-hover);
    --ok: var(--ds-color-success);
    --warn: var(--ds-color-warning);
    --danger: var(--ds-color-error);
    --radius: var(--ds-radius-md);
    --font: var(--ds-font-sans);
    --surface-alt: var(--ds-surface-muted);

    --bg: var(--ds-sidebar-bg-deep);

    --sidebar: var(--ds-sidebar-bg);
    --sidebar-elevated: #121a2e;
    --sidebar-text: var(--ds-sidebar-text);
    --sidebar-muted: var(--ds-sidebar-muted);
    --sidebar-hover: var(--ds-sidebar-hover);
    --sidebar-active: var(--ds-sidebar-active);
    --sidebar-border: var(--ds-sidebar-border);
    --sidebar-w: var(--ds-sidebar-width);
    --sidebar-float: var(--ds-sidebar-float);
    --sidebar-gap: var(--ds-sidebar-gap);

    --table-head-bg: var(--ds-table-head-bg);
    --table-head-bg-solid: var(--ds-table-head-bg-solid);
    --table-head-border: var(--ds-table-head-border);
    --table-head-text: var(--ds-table-head-text);

    /* Acento contextual (ex.: central de pagamentos) */
    --cp-accent: var(--ds-color-primary);
    --cp-accent-soft: var(--ds-color-primary-muted);
}