/* ═══════════════════════════════════════════════════════════════════
   BASE.CSS — Reset global, design tokens, tipografia e utilitários.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Custom Properties (Design Tokens) ──────────────────────────── */
/*
 * TWO TOKEN SYSTEMS COEXIST IN THIS PROJECT:
 * ─────────────────────────────────────────────────────────────
 * 1. Legacy tokens (--c-*, --sp-*, --r-*, --t-*, etc.)
 *    Used by: Dashboard, Upload, Aging, Filter, Table, KPI, Charts views.
 *    Do NOT remove — all non-MC JS components depend on them.
 *
 * 2. New design-system tokens (--color-*, --space-*, --font-*, etc.)
 *    Sourced from _ref/tokens.css (TIRZEAPP design system).
 *    Used by: Mission Control (mc.css) via --mc-* aliases,
 *    and any future components aligned to the new system.
 * ─────────────────────────────────────────────────────────────
 */

/* ── DESIGN SYSTEM TOKENS — cópia fiel de _ref2/tokens.css ──────── */
:root {

  /* Fundos */
  --color-bg-root:         #000000;
  --color-bg-void:         #000000;

  /* Superfícies estratificadas */
  --color-surface-00:      #000000;
  --color-surface-01:      #0A0A0A;
  --color-surface-02:      #111111;
  --color-surface-03:      #161616;
  --color-surface-04:      #1A1A1A;
  --color-surface-05:      #222222;
  --color-surface-06:      #2A2A2A;

  /* Bordas */
  --color-border-subtle:   rgba(255, 255, 255, 0.07);
  --color-border-default:  rgba(255, 255, 255, 0.12);
  --color-border-strong:   rgba(255, 255, 255, 0.22);
  --color-border-solid:    #2E2E2E;

  /* Textos — hierarquia de 6 graus */
  --color-text-primary:    #FFFFFF;
  --color-text-heading:    #FFFFFF;
  --color-text-sub:        #E8E8E8;
  --color-text-secondary:  #9E9E9E;
  --color-text-tertiary:   rgba(255, 255, 255, 0.45);
  --color-text-support:    rgba(255, 255, 255, 0.65);
  --color-text-disabled:   rgba(255, 255, 255, 0.28);
  --color-text-inverse:    #000000;

  /* Interativos */
  --color-interactive:       #FFFFFF;
  --color-interactive-dim:   rgba(255, 255, 255, 0.08);
  --color-interactive-hover: rgba(255, 255, 255, 0.12);
  --color-interactive-press: rgba(255, 255, 255, 0.06);

  /* Semântica — acento funcional, nunca dominante */
  --color-semantic-positive:        #4CAF7D;
  --color-semantic-positive-dim:    rgba(76, 175, 125, 0.12);
  --color-semantic-positive-border: rgba(76, 175, 125, 0.25);
  --color-semantic-positive-text:   #6FCF97;

  --color-semantic-negative:        #D95F5F;
  --color-semantic-negative-dim:    rgba(217, 95, 95, 0.12);
  --color-semantic-negative-border: rgba(217, 95, 95, 0.25);
  --color-semantic-negative-text:   #E07070;

  --color-semantic-warning:        #C9A84C;
  --color-semantic-warning-dim:    rgba(201, 168, 76, 0.12);
  --color-semantic-warning-border: rgba(201, 168, 76, 0.25);
  --color-semantic-warning-text:   #E2C97E;

  --color-semantic-info:           #4A90B8;
  --color-semantic-info-dim:       rgba(74, 144, 184, 0.12);
  --color-semantic-info-border:    rgba(74, 144, 184, 0.25);
  --color-semantic-info-text:      #7EB4C9;

  /* Aliases de estado */
  --color-state-success: var(--color-semantic-positive-text);
  --color-state-warning: var(--color-semantic-warning-text);
  --color-state-error:   var(--color-semantic-negative-text);
  --color-state-info:    var(--color-semantic-info-text);

  /* Tipografia */
  --font-family-base:      'Archivo', system-ui, sans-serif;
  --font-size-2xs:   10px;
  --font-size-xs:    11px;
  --font-size-sm:    13px;
  --font-size-base:  15px;
  --font-size-md:    17px;
  --font-size-lg:    20px;
  --font-size-xl:    24px;
  --font-size-2xl:   30px;
  --font-size-3xl:   38px;
  --font-size-4xl:   48px;
  --font-weight-thin:      100;
  --font-weight-light:     300;
  --font-weight-regular:   400;
  --font-weight-medium:    500;
  --font-weight-semibold:  600;
  --font-weight-bold:      700;
  --font-weight-extrabold: 800;
  --line-height-tight:   1.08;
  --line-height-snug:    1.22;
  --line-height-base:    1.5;
  --line-height-relaxed: 1.68;
  --tracking-tight:   -0.02em;
  --tracking-snug:    -0.01em;
  --tracking-normal:   0em;
  --tracking-wide:     0.04em;
  --tracking-wider:    0.08em;
  --tracking-label:    0.10em;
  --tracking-widest:   0.14em;

  /* Espaçamento — escala 4px exata do DS */
  --space-1:  4px;  --space-2:  8px;  --space-3: 12px;  --space-4: 16px;
  --space-5: 20px;  --space-6: 24px;  --space-7: 28px;  --space-8: 32px;
  --space-9: 36px;  --space-10: 40px; --space-11: 44px; --space-12: 48px;
  --space-14: 56px; --space-16: 64px; --space-20: 80px; --space-24: 96px;

  /* Border radius — exato do DS */
  --radius-none: 0px;
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   8px;
  --radius-xl:   12px;
  --radius-pill: 999px;

  /* Sombras — heavier blacks */
  --shadow-none: none;
  --shadow-xs:   0 1px 3px rgba(0, 0, 0, 0.6);
  --shadow-sm:   0 2px 8px rgba(0, 0, 0, 0.7);
  --shadow-md:   0 4px 20px rgba(0, 0, 0, 0.8), 0 1px 4px rgba(0,0,0,0.5);
  --shadow-lg:   0 8px 40px rgba(0, 0, 0, 0.9);
  --shadow-glow: 0 0 0 1px rgba(255,255,255,0.08), 0 4px 24px rgba(0,0,0,0.8);

  /* Transições */
  --ease-out-quart:    cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1);
  --duration-instant:  80ms;
  --duration-fast:     140ms;
  --duration-base:     220ms;
  --duration-slow:     360ms;

  /* Layout / grid */
  --grid-max:    1440px;
  --content-max: 960px;
  --narrow-max:  640px;
  --z-header:    100;
  --z-overlay:    50;
  --z-modal:     200;
}

/* ── LEGACY TOKENS (dashboard + upload + aging UIs) ─────────────── */
:root {
  /* Cores principais */
  /* Semantic — desaturated, data-only, never chrome */
  --c-primary:       rgba(255,255,255,0.80);
  --c-primary-dark:  rgba(255,255,255,0.90);
  --c-primary-light: rgba(255,255,255,0.07);
  --c-secondary:     #A78BFA;
  --c-secondary-light: rgba(167,139,250,0.10);
  --c-success:       #6FCF97;
  --c-success-light: rgba(111,207,151,0.12);
  --c-warning:       #D4A84B;
  --c-warning-light: rgba(212,168,75,0.10);
  --c-danger:        #E07070;
  --c-danger-light:  rgba(224,112,112,0.12);
  --c-info:          #5A9FC8;
  --c-info-light:    rgba(90,159,200,0.12);
  --c-neutral:       #9E9E9E;
  --c-neutral-light: rgba(255,255,255,0.06);

  /* Superfícies e fundos — dark monochrome system */
  --c-bg:            #000000;
  --c-surface:       #111111;
  --c-surface-hover: rgba(255,255,255,0.04);
  --c-elevated:      #1A1A1A;
  --c-divider:       rgba(255,255,255,0.07);
  --c-border:        rgba(255,255,255,0.11);
  --c-border-focus:  rgba(255,255,255,0.30);

  /* Texto — 5-step monochrome scale */
  --c-text-primary:   #FFFFFF;
  --c-text-secondary: #9E9E9E;
  --c-text-tertiary:  rgba(255,255,255,0.40);
  --c-text-inverted:  #000000;

  /* Tipografia */
  /* NOTE: --font-sans aligned to Archivo for full monochrome system. */
  --font-sans:  'Archivo', 'Inter', system-ui, sans-serif;
  --font-mono:  'JetBrains Mono', 'Courier New', monospace;

  /* Tamanhos de fonte */
  --text-2xs: 10px;
  --text-xs:  11px;
  --text-sm:  12px;
  --text-base:13px;
  --text-md:  14px;
  --text-lg:  16px;
  --text-xl:  18px;
  --text-2xl: 22px;
  --text-3xl: 28px;

  /* Espaçamentos */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;

  /* Border radius — contained, precise */
  --r-sm:   3px;
  --r-md:   6px;
  --r-lg:   8px;
  --r-xl:   12px;
  --r-full: 9999px;

  /* Sombras — premium dark */
  --shadow-xs: 0 1px 3px rgba(0,0,0,0.60);
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.70);
  --shadow-md: 0 4px 20px rgba(0,0,0,0.80), 0 1px 4px rgba(0,0,0,0.50);
  --shadow-lg: 0 8px 40px rgba(0,0,0,0.90);
  --shadow-focus: 0 0 0 3px rgba(255,255,255,0.08);

  /* Transições */
  --t-fast:   150ms ease;
  --t-normal: 250ms ease;
  --t-slow:   350ms ease;

  /* Layout */
  --sidebar-w:          240px;
  --sidebar-w-collapsed: 60px;
  --header-h:           56px;
  --content-max-w:      1600px;
}

/* ── Reset ───────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 14px; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  font-family:      var(--font-sans);
  font-size:        var(--text-base);
  color:            var(--c-text-primary);
  background:       var(--c-bg);
  line-height:      1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

button, input, select, textarea {
  font-family: inherit;
  font-size:   inherit;
}

button { cursor: pointer; }

a { color: var(--color-text-sub); text-decoration: none; }
a:hover { color: var(--color-text-primary); text-decoration: none; }

img, svg { display: block; max-width: 100%; }

/* ── Scroll ─────────────────────────────────────────────────────── */
::-webkit-scrollbar        { width: 5px; height: 5px; }
::-webkit-scrollbar-track  { background: transparent; }
::-webkit-scrollbar-thumb  { background: #2A2A2A; border-radius: 9999px; }
::-webkit-scrollbar-thumb:hover { background: #3A3A3A; }

/* ── Animações globais ───────────────────────────────────────────── */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInScale {
  from { opacity: 0; transform: scale(.95); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: .5; }
}
@keyframes progressFill {
  from { width: 0; }
}
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.anim-fadein      { animation: fadeIn      var(--t-normal) both; }
.anim-fadein-scale { animation: fadeInScale var(--t-normal) both; }

/* ── Utilitários ─────────────────────────────────────────────────── */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.truncate  { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mono      { font-family: var(--font-mono); }
.text-xs   { font-size: var(--text-xs); }
.text-sm   { font-size: var(--text-sm); }
.text-md   { font-size: var(--text-md); }
.text-muted { color: var(--c-text-tertiary); }

/* ── Spinner ─────────────────────────────────────────────────────── */
.spinner {
  display:       inline-block;
  border-radius: 50%;
  border-style:  solid;
  border-color:  var(--c-divider);
  border-top-color: var(--c-primary);
  animation:     spin .7s linear infinite;
}
.spinner-sm { width:16px; height:16px; border-width:2px; }
.spinner-md { width:24px; height:24px; border-width:3px; }
.spinner-lg { width:36px; height:36px; border-width:4px; }

/* ── Empty state ─────────────────────────────────────────────────── */
.empty-state {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  justify-content:center;
  padding:        var(--sp-12) var(--sp-6);
  text-align:     center;
  color:          var(--c-text-tertiary);
}
.empty-state-icon { font-size: 36px; margin-bottom: var(--sp-3); opacity: .5; }
.empty-state-title   { font-size: var(--text-md); font-weight: 600; color: var(--c-text-secondary); margin-bottom: var(--sp-1); }
.empty-state-subtitle { font-size: var(--text-sm); }

/* ── Badge ───────────────────────────────────────────────────────── */
.badge {
  display:       inline-flex;
  align-items:   center;
  gap:           4px;
  padding:       2px 8px;
  border-radius: var(--r-full);
  font-size:     var(--text-xs);
  font-weight:   600;
  line-height:   1.4;
  white-space:   nowrap;
}
.badge-primary  { background:var(--c-primary-light); color:var(--c-primary); }
.badge-success  { background:var(--c-success-light); color:var(--c-success); }
.badge-warning  { background:var(--c-warning-light); color:var(--c-warning); }
.badge-danger   { background:var(--c-danger-light);  color:var(--c-danger);  }
.badge-neutral  { background:var(--c-neutral-light); color:var(--c-neutral); }
.badge-info     { background:var(--c-info-light);    color:var(--c-info);    }

/* ── Buttons ─────────────────────────────────────────────────────── */
.btn {
  display:        inline-flex;
  align-items:    center;
  gap:            var(--sp-2);
  padding:        var(--sp-2) var(--sp-4);
  border-radius:  var(--r-md);
  font-size:      var(--text-sm);
  font-weight:    500;
  border:         1px solid transparent;
  transition:     all var(--t-fast);
  white-space:    nowrap;
  text-decoration:none;
}
.btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.btn-primary {
  background: var(--color-text-primary);
  color:      var(--color-surface-00);
  border-color: transparent;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  font-size: 11px;
}
.btn-primary:hover {
  background: #E8E8E8;
}

.btn-outline {
  background:   transparent;
  color:        var(--color-text-secondary);
  border-color: var(--color-border-default);
}
.btn-outline:hover {
  background:   rgba(255,255,255,0.06);
  color:        var(--color-text-primary);
  border-color: var(--color-border-strong);
}

.btn-ghost {
  background:   transparent;
  color:        var(--color-text-secondary);
  border-color: transparent;
}
.btn-ghost:hover {
  background: rgba(255,255,255,0.05);
  color:      var(--color-text-primary);
}

.btn-sm { padding:var(--sp-1) var(--sp-3); font-size:var(--text-xs); gap:var(--sp-1); }
.btn-xs { padding:2px 8px; font-size:var(--text-2xs); }

/* ── Warning box ─────────────────────────────────────────────────── */
.warning-box {
  display:       flex;
  align-items:   flex-start;
  gap:           var(--sp-3);
  padding:       var(--sp-3) var(--sp-4);
  background:    var(--color-semantic-warning-dim);
  border:        1px solid var(--color-semantic-warning-border);
  border-radius: var(--r-md);
  color:         var(--color-semantic-warning-text);
  font-size:     var(--text-sm);
}
.warning-box > i { flex-shrink:0; margin-top:2px; color:var(--color-semantic-warning-text); }

/* ── Error message ───────────────────────────────────────────────── */
.error-message {
  display:       flex;
  align-items:   center;
  gap:           var(--sp-3);
  padding:       var(--sp-3) var(--sp-4);
  background:    var(--color-semantic-negative-dim);
  border:        1px solid var(--color-semantic-negative-border);
  border-radius: var(--r-md);
  color:         var(--color-semantic-negative-text);
  font-size:     var(--text-sm);
}