/* =========================================================
   MAIS CONTROL — Design Tokens
   ========================================================= */

:root {
  /* === BRAND === */
  --mc-blue-50:  #EFF5FF;
  --mc-blue-100: #DBE8FE;
  --mc-blue-200: #BED5FE;
  --mc-blue-300: #91B8FC;
  --mc-blue-400: #5E91F8;
  --mc-blue-500: #2563EB; /* primária */
  --mc-blue-600: #1D4FD7;
  --mc-blue-700: #1A3FB0;
  --mc-blue-800: #1B358C;
  --mc-blue-900: #1B3070;
  --mc-blue-950: #131F47;

  /* secundária — verde fiscal (sucesso emissão) */
  --mc-green-50:  #ECFDF5;
  --mc-green-100: #D1FAE5;
  --mc-green-200: #A7F3D0;
  --mc-green-300: #6EE7B7;
  --mc-green-400: #34D399;
  --mc-green-500: #10B981;
  --mc-green-600: #059669;
  --mc-green-700: #047857;

  /* alerta — amber processando/pendente */
  --mc-amber-50:  #FFFBEB;
  --mc-amber-100: #FEF3C7;
  --mc-amber-200: #FDE68A;
  --mc-amber-400: #FBBF24;
  --mc-amber-500: #F59E0B;
  --mc-amber-600: #D97706;
  --mc-amber-700: #B45309;

  /* erro — vermelho rejeição */
  --mc-red-50:  #FEF2F2;
  --mc-red-100: #FEE2E2;
  --mc-red-200: #FECACA;
  --mc-red-400: #F87171;
  --mc-red-500: #EF4444;
  --mc-red-600: #DC2626;
  --mc-red-700: #B91C1C;

  /* info — roxo (cancelamento/anulação) */
  --mc-violet-50:  #F5F3FF;
  --mc-violet-100: #EDE9FE;
  --mc-violet-500: #8B5CF6;
  --mc-violet-600: #7C3AED;

  /* === NEUTROS === */
  --mc-slate-0:   #FFFFFF;
  --mc-slate-50:  #F8FAFC;
  --mc-slate-100: #F1F5F9;
  --mc-slate-150: #E8EEF5;
  --mc-slate-200: #E2E8F0;
  --mc-slate-300: #CBD5E1;
  --mc-slate-400: #94A3B8;
  --mc-slate-500: #64748B;
  --mc-slate-600: #475569;
  --mc-slate-700: #334155;
  --mc-slate-800: #1E293B;
  --mc-slate-900: #0F172A;
  --mc-slate-950: #060B17;
}

/* === LIGHT (default) === */
:root, [data-theme="light"] {
  --bg:            var(--mc-slate-50);
  --surface:       var(--mc-slate-0);
  --surface-2:     var(--mc-slate-50);
  --surface-3:     var(--mc-slate-100);
  --border:        var(--mc-slate-200);
  --border-strong: var(--mc-slate-300);
  --text:          var(--mc-slate-900);
  --text-2:        var(--mc-slate-600);
  --text-3:        var(--mc-slate-500);
  --text-on-brand: #FFFFFF;
  --brand:         var(--mc-blue-500);
  --brand-hover:   var(--mc-blue-600);
  --brand-soft:    var(--mc-blue-50);
  --brand-soft-hover: var(--mc-blue-100);
  --focus-ring:    color-mix(in oklch, var(--mc-blue-500) 35%, transparent);

  --success: var(--mc-green-600);
  --success-soft: var(--mc-green-50);
  --warning: var(--mc-amber-600);
  --warning-soft: var(--mc-amber-50);
  --danger:  var(--mc-red-600);
  --danger-soft: var(--mc-red-50);
  --info:    var(--mc-violet-600);
  --info-soft: var(--mc-violet-50);

  --shadow-xs: 0 1px 2px 0 rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 1px 3px 0 rgba(15, 23, 42, 0.06), 0 1px 2px 0 rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 12px -2px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 12px 32px -8px rgba(15, 23, 42, 0.12), 0 4px 8px -4px rgba(15, 23, 42, 0.06);
  --shadow-xl: 0 24px 48px -12px rgba(15, 23, 42, 0.18);
  --shadow-brand: 0 8px 24px -8px color-mix(in oklch, var(--mc-blue-500) 50%, transparent);
}

/* === DARK === */
[data-theme="dark"] {
  --bg:            #0A1226;
  --surface:       #111A33;
  --surface-2:     #15203F;
  --surface-3:     #1B284E;
  --border:        #243363;
  --border-strong: #2E4080;
  --text:          #F1F5F9;
  --text-2:        #94A3B8;
  --text-3:        #64748B;
  --text-on-brand: #FFFFFF;
  --brand:         #5E91F8;
  --brand-hover:   #91B8FC;
  --brand-soft:    rgba(94, 145, 248, 0.12);
  --brand-soft-hover: rgba(94, 145, 248, 0.18);
  --focus-ring:    color-mix(in oklch, #5E91F8 45%, transparent);

  --success: #34D399;
  --success-soft: rgba(52, 211, 153, 0.12);
  --warning: #FBBF24;
  --warning-soft: rgba(251, 191, 36, 0.12);
  --danger:  #F87171;
  --danger-soft: rgba(248, 113, 113, 0.12);
  --info:    #A78BFA;
  --info-soft: rgba(167, 139, 250, 0.14);

  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.5), 0 1px 2px 0 rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 12px -2px rgba(0, 0, 0, 0.5), 0 2px 4px -2px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 12px 32px -8px rgba(0, 0, 0, 0.55);
  --shadow-xl: 0 24px 48px -12px rgba(0, 0, 0, 0.7);
  --shadow-brand: 0 8px 24px -8px rgba(94, 145, 248, 0.4);
}

/* === TYPOGRAPHY === */
:root {
  --font-display: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-body:    "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --text-2xs:  11px;
  --text-xs:   12px;
  --text-sm:   13px;
  --text-base: 14px;
  --text-md:   15px;
  --text-lg:   17px;
  --text-xl:   20px;
  --text-2xl:  24px;
  --text-3xl:  30px;
  --text-4xl:  38px;
  --text-5xl:  48px;
  --text-6xl:  60px;
  --text-7xl:  76px;

  --leading-tight:  1.15;
  --leading-snug:   1.3;
  --leading-normal: 1.5;
  --leading-loose:  1.7;

  --tracking-tight:  -0.02em;
  --tracking-snug:   -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;

  /* === SPACING (4px base) === */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  32px;
  --space-8:  40px;
  --space-9:  48px;
  --space-10: 64px;
  --space-11: 80px;
  --space-12: 96px;

  /* === RADIUS === */
  --radius-xs:  4px;
  --radius-sm:  6px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-2xl: 20px;
  --radius-3xl: 28px;
  --radius-full: 999px;

  /* === MOTION === */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:    120ms;
  --dur-base:    200ms;
  --dur-slow:    320ms;
}

/* === BASE === */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv11";
}
.font-mono { font-family: var(--font-mono); font-feature-settings: "tnum"; }
.tnum { font-variant-numeric: tabular-nums; }