/* ═══════════════════════════════════════════════════════════════════════════
   Tokens do design system Lepton — espelho do "Lepton Guide.fig".

   Este é o ÚNICO arquivo do sistema onde cores hexadecimais devem aparecer.
   Página, componente e CSS isolado consomem sempre var(--lp-*).

   Fonte da verdade dos valores:
   docs/tasks/10-redesign-lepton-guide/00-referencia-design-system.md
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    /* ── Marca ──────────────────────────────────────────────────────────── */
    --lp-brand: #C320C9;
    --lp-brand-darker: #770A7B;
    --lp-brand-lighter: #DCAADE;
    --lp-brand-subtle: #E8DAE9;

    /* ── Escuros ────────────────────────────────────────────────────────── */
    --lp-dark-1: #111111;
    --lp-dark-2: #101828;
    --lp-dark-3: #575F6E;

    /* ── Neutros ────────────────────────────────────────────────────────── */
    --lp-white: #FFFFFF;
    --lp-gray-1: #666666;
    --lp-gray-2: #8A8C91;
    --lp-gray-3: #D3D3D3;
    --lp-gray-4: #CED4DA;
    --lp-gray-5: #F1F1F1;
    --lp-gray-6: #FAFAFA;

    /* ── Neutros complementares (uso específico no guia) ────────────────── */
    --lp-border-subtle: #EAECF0;
    --lp-divider: #F2F2F5;
    --lp-nav-active-bg: #E7E7E7;
    --lp-helper-text: #B2B2B2;
    --lp-nav-guide: #D9D9D9;
    --lp-text-muted: #6B7588;

    /* ── Semânticas ─────────────────────────────────────────────────────────
       ATENÇÃO: o tom `base` é cor de FUNDO (badge, banner, chip). Para TEXTO
       sobre fundo claro use o tom `-dark` — os `base` não atingem contraste
       mínimo como texto sobre branco (ex.: --lp-warning dá ~1.7:1).
       ───────────────────────────────────────────────────────────────────── */
    --lp-success: #3DC45F;
    --lp-success-bg: #E2FFEB;
    --lp-success-light: #4BED74;
    --lp-success-dark: #309249;

    --lp-info: #4286EB;
    --lp-info-bg: #EFF6FF;
    --lp-info-light: #6CA7FF;
    --lp-info-dark: #0051CA;

    --lp-warning: #F0CE45;
    --lp-warning-bg: #FEFCE8;
    --lp-warning-light: #FFE372;
    --lp-warning-dark: #DDB100;

    --lp-error: #E85757;
    --lp-error-bg: #FEF2F2;
    --lp-error-light: #FF5E5E;
    --lp-error-dark: #B74141;

    /* Texto sobre fundo amarelo (warning) — branco falha o contraste */
    --lp-warning-on: #333333;

    /* ── Papéis semânticos (o que a aplicação consome no dia a dia) ─────── */
    --lp-surface: var(--lp-white);
    --lp-surface-sunken: var(--lp-gray-6);
    --lp-border: var(--lp-gray-4);
    --lp-text: var(--lp-dark-2);
    --lp-text-secondary: var(--lp-gray-1);
    --lp-text-placeholder: var(--lp-gray-2);
    --lp-text-on-brand: var(--lp-white);

    /* ── Tipografia ─────────────────────────────────────────────────────── */
    --lp-font-family: 'Roboto', 'Segoe UI Variable', 'Segoe UI', sans-serif;

    --lp-weight-extralight: 200;
    --lp-weight-regular: 400;
    --lp-weight-medium: 500;
    --lp-weight-semibold: 600;
    --lp-weight-bold: 700;

    --lp-display-1-size: 48px;
    --lp-display-1-lh: 56px;
    --lp-h1-size: 44px;
    --lp-h1-lh: 48px;
    --lp-h2-size: 36px;
    --lp-h2-lh: 40px;
    --lp-h3-size: 28px;
    --lp-h3-lh: 32px;
    --lp-h4-size: 24px;
    --lp-h4-lh: 32px;
    --lp-h5-size: 20px;
    --lp-h5-lh: 32px;
    --lp-h6-size: 16px;
    --lp-h6-lh: 24px;
    --lp-body-lg-size: 20px;
    --lp-body-lg-lh: 32px;
    --lp-body-md-size: 18px;
    --lp-body-md-lh: 24px;
    --lp-body-size: 16px;
    --lp-body-lh: 24px;
    --lp-body-sm-size: 14px;
    --lp-body-sm-lh: 24px;
    --lp-overline-size: 10px;
    --lp-overline-lh: 12px;

    /* ── Espaçamento (escala de 4px do guia) ────────────────────────────── */
    --lp-space-0: 0;
    --lp-space-1: 4px;
    --lp-space-2: 8px;
    --lp-space-3: 12px;
    --lp-space-4: 16px;
    --lp-space-5: 20px;
    --lp-space-6: 24px;
    --lp-space-8: 32px;
    --lp-space-12: 48px;

    /* ── Raios ──────────────────────────────────────────────────────────── */
    --lp-radius-control: 4px;
    --lp-radius-button: 8px;
    --lp-radius-surface: 8px;
    --lp-radius-badge: 7px;
    --lp-radius-card: 12px;
    --lp-radius-sidebar: 16px;
    --lp-radius-pill: 999px;

    /* ── Dimensões ──────────────────────────────────────────────────────── */
    --lp-control-height: 48px;
    --lp-control-height-sm: 40px;
    --lp-control-height-lg: 56px;
    --lp-textarea-height: 128px;
    --lp-field-padding-x: 16px;
    --lp-topbar-height: 88px;
    --lp-sidebar-width: 256px;
    --lp-sidebar-width-collapsed: 112px;
    --lp-nav-item-height: 44px;
    --lp-nav-subitem-height: 32px;
    --lp-nav-subitem-size: 12px;
    --lp-card-header-height: 80px;
    --lp-pagination-height: 64px;

    /* ── Tabela (guia §7: header cinza, células com grade, linhas alternadas) ─ */
    --lp-table-row-height: 48px;
    --lp-table-header-bg: var(--lp-gray-3);
    --lp-table-stripe: #F8F8F8;

    /* ── Bordas e foco ──────────────────────────────────────────────────── */
    --lp-border-width: 1px;
    --lp-focus-ring-width: 2px;
    --lp-focus-ring-color: var(--lp-brand-lighter);
    --lp-focus-halo-color: var(--lp-brand-subtle);

    /* ── Sombras ────────────────────────────────────────────────────────── */
    --lp-shadow-card: 4px 8px 24px var(--lp-divider);
    --lp-shadow-floating: 0 0 8px rgb(0 0 0 / 25%);

    /* ── Grid e breakpoints ─────────────────────────────────────────────── */
    --lp-breakpoint-tablet: 768px;
    --lp-breakpoint-desktop: 1024px;
    --lp-breakpoint-desktop-hd: 1440px;
    --lp-grid-gutter: 24px;
    --lp-grid-gutter-tablet: 16px;

    /* ── Console / saída de log ─────────────────────────────────────────────
       O guia não cobre o visualizador de logs. Decisão: clarear conforme o
       tema, usando os tons `-dark` das semânticas como cor de texto. */
    --lp-console-bg: var(--lp-gray-6);
    --lp-console-text: var(--lp-text);
    --lp-console-hover: var(--lp-gray-5);
}