/* =========================================================
   PixCard Design System — Tokens Enterprise (Onda 1)
   =========================================================
   Camada única de tokens consumida por todo o sistema.
   Sobrescreve/estende colors_and_type.css com decisões enterprise:
   - cores semânticas com tons (50/100/200/.../900)
   - spacing scale ancorada em base 4
   - typography scale enterprise (display/title/body/caption/mono)
   - shadows com elevação semântica
   - radii consistentes
   - motion (duração + easing) padronizados
   - z-index escalonado
   - tokens prontos para dark mode
   ========================================================= */

/* Fontes servidas pela aplicação: css/fontes.css (SEC-022). */

:root, [data-theme="light"] {
  /* ============================================
     1. PRIMITIVE COLORS — palette completa
     ============================================ */

  /* Brand */
  --color-brand-50:  #FFFBEB;
  --color-brand-100: #FFF4CC;
  --color-brand-200: #FFE89A;
  --color-brand-300: #FFD865;
  --color-brand-400: #F8C11C;   /* PixCard yellow */
  --color-brand-500: #E6B214;
  --color-brand-600: #C99A0E;
  --color-brand-700: #A37C08;
  --color-brand-800: #6E5400;
  --color-brand-900: #4A3900;

  /* Neutral (warm slate) */
  --color-neutral-0:   #FFFFFF;
  --color-neutral-25:  #FCFCFA;
  --color-neutral-50:  #FAFAF7;
  --color-neutral-75:  #F7F6F1;
  --color-neutral-100: #F4F4EE;
  --color-neutral-150: #ECECE5;
  --color-neutral-200: #E6E6E1;
  --color-neutral-300: #D4D4CD;
  --color-neutral-400: #A6A69E;
  --color-neutral-500: #76766F;
  --color-neutral-600: #565650;
  --color-neutral-700: #3C3C38;
  --color-neutral-800: #28282A;
  --color-neutral-900: #16171B;
  --color-neutral-950: #0B0B0E;

  /* Semantic — Success */
  --color-success-50:  #E5F4EC;
  --color-success-100: #C8E6D2;
  --color-success-200: #91CCA6;
  --color-success-300: #5AB179;
  --color-success-500: #1F8A4C;
  --color-success-600: #167239;
  --color-success-700: #105528;
  --color-success-800: #0B3D1C;

  /* Semantic — Info */
  --color-info-50:  #E6EEFD;
  --color-info-100: #C6D9F9;
  --color-info-200: #8FB1F0;
  --color-info-300: #5688E5;
  --color-info-500: #1F6FEB;
  --color-info-600: #1654BC;
  --color-info-700: #134397;
  --color-info-800: #0E316E;

  /* Semantic — Warning */
  --color-warning-50:  #FBF1D9;
  --color-warning-100: #F6E1A3;
  --color-warning-200: #EAC560;
  --color-warning-300: #D7A720;
  --color-warning-500: #C68A00;
  --color-warning-600: #9F6E00;
  --color-warning-700: #7A5400;
  --color-warning-800: #573B00;

  /* Semantic — Danger */
  --color-danger-50:  #FBE7E4;
  --color-danger-100: #F3C2BB;
  --color-danger-200: #E58A7C;
  --color-danger-300: #D2563F;
  --color-danger-500: #C0392B;
  --color-danger-600: #9A2D22;
  --color-danger-700: #7A2018;
  --color-danger-800: #571610;

  /* ============================================
     2. SEMANTIC ALIASES — uso na UI
     ============================================ */

  /* Surfaces */
  --surface-app:        var(--color-neutral-50);
  --surface-card:       var(--color-neutral-0);
  --surface-subtle:     var(--color-neutral-75);
  --surface-muted:      var(--color-neutral-100);
  --surface-emphasis:   var(--color-neutral-150);
  --surface-overlay:    rgba(11, 11, 14, 0.48);
  --surface-inverse:    var(--color-neutral-950);

  /* Foreground (text + icons) */
  --fg-strong:    var(--color-neutral-950);
  --fg-default:   var(--color-neutral-700);
  --fg-muted:     var(--color-neutral-500);
  --fg-subtle:    var(--color-neutral-400);
  --fg-on-brand:  var(--color-neutral-950);
  --fg-on-inverse:#FFFFFF;
  --fg-link:      var(--color-info-700);
  --fg-link-hover:var(--color-info-800);

  /* Borders */
  --border-default: var(--color-neutral-200);
  --border-strong:  var(--color-neutral-300);
  --border-muted:   var(--color-neutral-150);
  --border-inverse: rgba(255,255,255,0.10);
  --border-focus:   var(--color-info-500);

  /* Brand */
  --brand:          var(--color-brand-400);
  --brand-hover:    var(--color-brand-500);
  --brand-press:    var(--color-brand-600);
  --brand-soft:     var(--color-brand-100);
  --brand-soft-2:   var(--color-brand-200);
  --on-brand:       var(--color-neutral-950);

  /* Status — bg / fg / border */
  --status-success-bg:     var(--color-success-50);
  --status-success-border:  var(--color-success-200);
  --status-success-fg:     var(--color-success-700);
  --status-success-solid:  var(--color-success-500);

  --status-info-bg:        var(--color-info-50);
  --status-info-border:    var(--color-info-200);
  --status-info-fg:        var(--color-info-700);
  --status-info-solid:     var(--color-info-500);

  --status-warning-bg:     var(--color-warning-50);
  --status-warning-border: var(--color-warning-200);
  --status-warning-fg:     var(--color-warning-700);
  --status-warning-solid:  var(--color-warning-500);

  --status-danger-bg:      var(--color-danger-50);
  --status-danger-border:  var(--color-danger-200);
  --status-danger-fg:      var(--color-danger-700);
  --status-danger-solid:   var(--color-danger-500);

  --status-neutral-bg:     var(--color-neutral-100);
  --status-neutral-border: var(--color-neutral-300);
  --status-neutral-fg:     var(--color-neutral-700);
  --status-neutral-solid:  var(--color-neutral-500);

  /* Estados operacionais de remessa — alinhados ao vocabulário do produto */
  --op-rascunho-fg:            var(--status-neutral-fg);
  --op-rascunho-bg:            var(--status-neutral-bg);
  --op-base-calculada-fg:      var(--status-info-fg);
  --op-base-calculada-bg:      var(--status-info-bg);
  --op-arquivo-gerado-fg:      var(--status-info-fg);
  --op-arquivo-gerado-bg:      var(--status-info-bg);
  --op-enviada-fg:             var(--status-info-fg);
  --op-enviada-bg:             var(--status-info-bg);
  --op-aguardando-retorno-fg:  var(--status-info-fg);
  --op-aguardando-retorno-bg:  var(--status-info-bg);
  --op-com-criticas-fg:        var(--status-warning-fg);
  --op-com-criticas-bg:        var(--status-warning-bg);
  --op-pronta-reprocessar-fg:  var(--status-warning-fg);
  --op-pronta-reprocessar-bg:  var(--status-warning-bg);
  --op-em-reprocessamento-fg:  var(--status-info-fg);
  --op-em-reprocessamento-bg:  var(--status-info-bg);
  --op-validada-fg:            var(--status-success-fg);
  --op-validada-bg:            var(--status-success-bg);
  --op-concluida-fg:           var(--status-success-fg);
  --op-concluida-bg:           var(--status-success-bg);
  --op-cancelada-fg:           var(--status-neutral-fg);
  --op-cancelada-bg:           var(--status-neutral-bg);

  /* ============================================
     3. TYPOGRAPHY
     ============================================ */
  --font-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono:  'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Scale (px / line-height / weight) — enterprise */
  --text-display-2xl: 700 48px/56px var(--font-sans);
  --text-display-xl:  700 40px/48px var(--font-sans);
  --text-display-lg:  700 32px/40px var(--font-sans);
  --text-title-xl:    600 24px/32px var(--font-sans);
  --text-title-lg:    600 20px/28px var(--font-sans);
  --text-title-md:    600 16px/24px var(--font-sans);
  --text-title-sm:    600 14px/20px var(--font-sans);
  --text-body-lg:     400 16px/24px var(--font-sans);
  --text-body-md:     400 14px/20px var(--font-sans);
  --text-body-sm:     400 13px/18px var(--font-sans);
  --text-body-xs:     400 12px/16px var(--font-sans);
  --text-caption:     500 11px/14px var(--font-sans);
  --text-overline:    600 10px/14px var(--font-sans);
  --text-mono-md:     500 13px/18px var(--font-mono);
  --text-mono-sm:     500 12px/16px var(--font-mono);

  --tracking-tighter: -0.02em;
  --tracking-tight:   -0.01em;
  --tracking-normal:   0;
  --tracking-wide:     0.04em;
  --tracking-wider:    0.08em;
  --tracking-widest:   0.12em;

  /* ============================================
     4. SPACING — base 4
     ============================================ */
  --space-0:   0;
  --space-px:  1px;
  --space-0_5: 2px;
  --space-1:   4px;
  --space-1_5: 6px;
  --space-2:   8px;
  --space-2_5: 10px;
  --space-3:  12px;
  --space-3_5:14px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  28px;
  --space-8:  32px;
  --space-9:  36px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ============================================
     5. RADII
     ============================================ */
  --radius-xs:  2px;
  --radius-sm:  4px;
  --radius-md:  6px;
  --radius-lg:  8px;
  --radius-xl:  12px;
  --radius-2xl: 16px;
  --radius-pill: 9999px;

  /* ============================================
     6. SHADOWS — elevação semântica
     ============================================ */
  --shadow-none:  none;
  --shadow-xs:    0 1px 0 rgba(11,11,14,0.04);
  --shadow-sm:    0 1px 2px rgba(11,11,14,0.06), 0 0 0 1px rgba(11,11,14,0.04);
  --shadow-md:    0 4px 12px -4px rgba(11,11,14,0.10), 0 0 0 1px rgba(11,11,14,0.04);
  --shadow-lg:    0 12px 32px -8px rgba(11,11,14,0.16), 0 0 0 1px rgba(11,11,14,0.04);
  --shadow-xl:    0 24px 48px -12px rgba(11,11,14,0.20), 0 0 0 1px rgba(11,11,14,0.04);
  --shadow-focus: 0 0 0 3px rgba(31,111,235,0.18);
  --shadow-focus-danger: 0 0 0 3px rgba(192,57,43,0.18);
  --shadow-focus-warning: 0 0 0 3px rgba(198,138,0,0.20);

  /* ============================================
     7. MOTION
     ============================================ */
  --duration-instant: 80ms;
  --duration-fast:    120ms;
  --duration-normal:  180ms;
  --duration-slow:    240ms;
  --duration-slower:  360ms;

  --ease-linear:   linear;
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:       cubic-bezier(0.4, 0, 1, 1);
  --ease-in-out:   cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ============================================
     8. Z-INDEX — escalonado
     ============================================ */
  --z-base:       0;
  --z-raised:     10;
  --z-sticky:     20;
  --z-dropdown:   30;
  --z-tooltip:    40;
  --z-drawer:     50;
  --z-modal:      60;
  --z-toast:      70;
  --z-command:    80;
  --z-debug:      9999;

  /* ============================================
     9. LAYOUT
     ============================================ */
  --sidebar-w:           240px;
  --sidebar-w-collapsed: 64px;
  --topbar-h:            0;            /* sem topbar global */
  --content-max:        1480px;
  --content-pad:         28px;

  /* ============================================
     10. FOCUS RING UNIVERSAL
     ============================================ */
  --focus-ring-w: 2px;
  --focus-ring:   var(--shadow-focus);
}

/* Dark mode preparado (não ativado por padrão).
   Para ativar: <html data-theme="dark"> */
[data-theme="dark"] {
  --surface-app:      var(--color-neutral-950);
  --surface-card:     var(--color-neutral-900);
  --surface-subtle:   #1A1B1F;
  --surface-muted:    var(--color-neutral-800);
  --surface-emphasis: var(--color-neutral-700);
  --surface-overlay:  rgba(0, 0, 0, 0.68);

  --fg-strong:   #FFFFFF;
  --fg-default:  var(--color-neutral-200);
  --fg-muted:    var(--color-neutral-400);
  --fg-subtle:   var(--color-neutral-500);

  --border-default: rgba(255,255,255,0.08);
  --border-strong:  rgba(255,255,255,0.14);
  --border-muted:   rgba(255,255,255,0.04);
}

/* =========================================================
   Base typography reset usando tokens
   ========================================================= */
html, body {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 20px;
  color: var(--fg-strong);
  background: var(--surface-app);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv11', 'ss01', 'tnum';
}

/* Utility helpers consumidos pelos componentes */
.text-display-2xl { font: var(--text-display-2xl); letter-spacing: var(--tracking-tighter); }
.text-display-xl  { font: var(--text-display-xl);  letter-spacing: var(--tracking-tight); }
.text-display-lg  { font: var(--text-display-lg);  letter-spacing: var(--tracking-tight); }
.text-title-xl    { font: var(--text-title-xl);    letter-spacing: var(--tracking-tight); }
.text-title-lg    { font: var(--text-title-lg); }
.text-title-md    { font: var(--text-title-md); }
.text-title-sm    { font: var(--text-title-sm); }
.text-body-lg     { font: var(--text-body-lg); }
.text-body-md     { font: var(--text-body-md); }
.text-body-sm     { font: var(--text-body-sm); }
.text-body-xs     { font: var(--text-body-xs); }
.text-caption     { font: var(--text-caption); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--fg-muted); }
.text-overline    { font: var(--text-overline); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--fg-muted); }
.text-mono-md     { font: var(--text-mono-md); font-variant-numeric: tabular-nums; }
.text-mono-sm     { font: var(--text-mono-sm); font-variant-numeric: tabular-nums; }

.fg-strong  { color: var(--fg-strong); }
.fg-default { color: var(--fg-default); }
.fg-muted   { color: var(--fg-muted); }
.fg-subtle  { color: var(--fg-subtle); }
.fg-link    { color: var(--fg-link); }

.surface-card    { background: var(--surface-card);    border: 1px solid var(--border-default); border-radius: var(--radius-lg); }
.surface-subtle  { background: var(--surface-subtle);  border: 1px solid var(--border-muted);   border-radius: var(--radius-lg); }
.surface-muted   { background: var(--surface-muted); }

::selection { background: var(--brand-soft-2); color: var(--on-brand); }

*:focus-visible {
  outline: var(--focus-ring-w) solid var(--border-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}